chore(Example): 重构 IndexList 组件示例

将头像存储到微信小程序云存储中
将姓名与英文索引对应起来

Author: juzi214032

examples/pages/components/layout/pages/index-list/index.js

@@ -1,17 +1,47 @@
 const sideBarData = [
-  'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'
+  'A','B','C','D','E','F','G','H','J','K','L','M','N','P','O','P','Q','R','S','T','W','X','Y','Z'
+]
+
+const nameData = [
+  ['安冉','艾浩宇'],
+  ['白昕玥','包博坤'],
+  ['陈麟','曹毛毛'],
+  ['邓波光','董睿希'],
+  ['鄂卓烆','洱惜文'],
+  ['冯月滢','范源'],
+  ['郭若诗','高薇竹'],
+  ['黄琪琪','胡纩鸯'],
+  ['蒋馥蔓','金倜厅'],
+  ['孔薇竹','康艳霞'],
+  ['李舒旬','刘笑'],
+  ['马亦','孟熠彤'],
+  ['倪靓','牛彗伶'],
+  ['欧玉兰','欧阳漂泊'],
+  ['潘静','皮文涛'],
+  ['钱卫国','秦健容'],
+  ['任倩倩','荣盈盈'],
+  ['孙桢','沈业轩'],
+  ['陶小树','唐子翊'],
+  ['吴洁立','王紫耘'],
+  ['许子豪','谢亚希'],
+  ['杨思远','尤庭亮'],
+  ['赵容','周承瑶'],
+  ['安冉','艾浩宇'],
 ]
 
 Page({
   data: {
-    scrollTop: 0,
-    sideBarData: sideBarData
+    nameData,
+    sideBarData
   },
 
-  onPageScroll(options) {
-    const scrollTop = options.scrollTop
-    this.setData({
-      scrollTop
+  /**
+   * 点击头像
+   */
+  onTapAvatar(e){
+    const avatarId = e.currentTarget.dataset.avatarId
+    wx.previewImage({
+      urls:[`cloud://env-9eb476.656e-env-9eb476-1258886794/images/index-list/avatar/${avatarId}.jpg`]
     })
   }
 });

examples/pages/components/layout/pages/index-list/index.wxml

@@ -1,4 +1,3 @@
-<wxs src="util.wxs" module="util"></wxs>
 <view class='container'>
   <content-title name="IndexList" describe="索引列表">
     <l-index-list
@@ -12,9 +11,9 @@
         <l-index-anchor/>
         <block wx:for="{{2}}" wx:key="index" wx:for-index="itemIndex">
           <view class="person-item">
-            <image lazy-load="{{true}}" class="person-avatar"
-                   src="{{util.getApi(anchorIndex%3)}}&xxx={{anchorIndex*10+itemIndex}}"></image>
-            <view class="person-name">{{util.assignName(anchorIndex*10+itemIndex)}}</view>
+            <image lazy-load="{{true}}" data-avatar-id="{{anchorIndex*2+itemIndex+1}}" catch:tap="onTapAvatar" class="person-avatar"
+                   src="cloud://env-9eb476.656e-env-9eb476-1258886794/images/index-list/avatar/{{anchorIndex*2+itemIndex+1}}.jpg"></image>
+            <view class="person-name">{{nameData[anchorIndex][itemIndex]}}</view>
           </view>
         </block>
       </block>