小程序-列表块/类式ul-li格式（1）

摘要

目前列表能布局出来，但是目前我个人还没解决的问题是：如果每个列表块都有详情页怎么解决呢？

1：我的效果图

2.正常的每个都能点击的html

注：上面的代码确实能够实现我的每个【menu2_view】都能点击成功进入每个对应的详情页。但是我个人认为还存在的问题是：相同的代码太多，相同列表一多，容易拖慢页面的加载。

2：小程序模块

<view class="menu2">

      <view class="menu2_view" wx:for="{{arry}}" wx:key="">

             <image src="{{item.src}}" mode="widthFix" class="menu3icon"></image>

             <text>{{item.text}}</text>

     </view>

</view>

js:

Page({

   data:{

       arry:[

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

        ]

    }

})

     最新调整2018-2-26    好吧上面的问题现在知道怎么解决了，以下就是最新版的哈

最新：小程序模块

<view class="menu2">

      <view class="menu2_view" wx:for="{{arry}}" wx:key="{{arry}}" wx:for-index="idx" bindtap="btnanniu">      //每个模块都有一个对应的idx.这样就可以进行判断了

             <image src="{{item.src}}" mode="widthFix" class="menu3icon" id="{{idx}}"></image>

             <text>{{item.text}}</text>

     </view>

</view>

js:

Page({

   data:{

       arry:[

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

             {src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},

        ]

    }，

btnanniu:function(e){

       console.log(e)     //此时获取到了id,之后就用id判断进入那个页面（以下图片我点击的是第二个按钮哈）

       console.log("例如：")

       if(e.target.id=="0"){

              wx.navigateTo({

                   url: '/pages/info/info',

              })

       } else if (e.target.id == "1"){

              wx.navigateTo({

                    url: '/pages/info1/info1',

             })

      }else if (e.target.id == "2") {

          // ...

     }

 

// 上面可以用if判断进入不同的页面，但是是针对按钮少的情况（若是按钮多且进入的都是不同页面，那就只有写死你）；

    若是都是进入的一个页面，那我们就需要在进入同一个的页面时需要传参，带着参数进入一样的页面就请求获取对应的数据（这个问题就是其他的问题了哈）

},

})