小程序-列表块/类式ul-li格式(1)

摘要

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

1:我的效果图

小程序-列表块/类式ul-li格式(1)

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

小程序-列表块/类式ul-li格式(1)

注:上面的代码确实能够实现我的每个【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判断进入那个页面(以下图片我点击的是第二个按钮哈)
小程序-列表块/类式ul-li格式(1)
       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判断进入不同的页面,但是是针对按钮少的情况(若是按钮多且进入的都是不同页面,那就只有写死你);
    若是都是进入的一个页面,那我们就需要在进入同一个的页面时需要传参,带着参数进入一样的页面就请求获取对应的数据(这个问题就是其他的问题了哈)
},

})

上一篇:Java基础97 json插件的使用(java对象和json字符串对象之间的转换)


下一篇:微信小程序退款 处理类