页面-案例展示-点击显示图片

//wxml,页面循环显示，指定显示个数
        <block wx:for="{{testdata3}}" wx:for-index="index">  
        <view wx:if="{{index<=3}}" class='servitem' catchtap='picclick' data-id="{{index}}">
            <image class='picitem01' src='{{testdata3[index].imgurl}}'></image> 
            <view class='serviteminfo'> {{testdata3[index].name}} </view>
        </view>
       </block> 

//js,案例请求，存入缓存，读取，写在onload函数中
    var that = this;
    //判断缓存中有无数据，有就赋值,没有就请求数据，存入缓存，并赋值
    var huancun = wx.getStorageSync('casesInfo')
    if(huancun){
      //console.log('have')
      that.setData({
        testdata3: huancun,
      })   
    }else{
      //console.log('nothave')
    //行业示例请求
    wx.request({
      //url: app.globalData.site + '/Husbandry_Manage/WeiXinCasesServlet?type=cases',
      url: app.globalData.site + '/Husbandry_Manage/WeiXinCasesServlet',
      data: {

      },
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      success: function (res) {
        console.log(res.data)

        //存入缓存
        //wx.setStorageSync('casesInfo', res.data)
        wx.setStorageSync('casesInfo', res.data[0].cases)
        //设置数据
        that.setData({
          //testdata3: res.data,
          testdata3: res.data[0].cases,
        })
      }
    })
    }

//点击预览图片，写在事件处理函数中
  picclick: function (e) {
    console.log(e.currentTarget.dataset.id)
    var that = this;
    wx.previewImage({
      current: that.data.testdata3[e.currentTarget.dataset.id].imgurl, // 当前显示图片的http链接
      urls: [that.data.testdata3[e.currentTarget.dataset.id].imgurl] // 需要预览的图片http链接列表
    })
  },

数据格式：

image.png

.servdemo{
  display: flex;
  flex-flow: row wrap;
  justify-content:flex-start;
  align-items:center;
  background-color: #eeeeee;
}
.servitem{
  margin-top: 20rpx; 
  width: 300rpx;
  height: 360rpx;
  display: flex;
  flex-flow: row wrap;
  justify-content:center;
  align-items:center;
  margin-left: 49rpx;
}
.picitem01{
  width: 300rpx;
  height: 300rpx;
  border-top-left-radius:30rpx;
  border-top-right-radius:0rpx;
  border-bottom-right-radius:30rpx;
  border-bottom-left-radius:0rpx;
  box-shadow: 1px 1px 5px #888888;
}
.serviteminfo{
  font-size: small;
  margin-top: 15rpx;
}