小程序-列表塊/類式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判斷進入不同的頁面，但是是針對按鈕少的情況（若是按鈕多且進入的都是不同頁面，那就只有寫死你）；

    若是都是進入的一個頁面，那我們就需要在進入同一個的頁面時需要傳參，帶着參數進入一樣的頁面就請求獲取對應的數據（這個問題就是其他的問題了哈）

},

})