页面-轮播图-点击跳转

2018-03-15  本文已影响0人  forsek
//wxml,
      <swiper class="swipersize" indicator-dots="true" catchtap="swiperclick"
        autoplay="true" interval="3000" circular="true" duration="1000" next-margin="0rpx">
         <block wx:for="{{testdata4}}" wx:for-index="index">
         <view wx:if="{{index>=1&&index<=3}}">
          <swiper-item>
            <image src="{{testdata4[index].picpath}}" class="slide-image" bindtap='img' data-id='{{index}}'/>
          </swiper-item>
         </view>
        </block> 
      </swiper>
//js,数据处理在onload函数里
    //判断缓存中有无数据,有就赋值,没有就请求数据,存入缓存,并赋值
    huancun = wx.getStorageSync('lunbopic')
    if(huancun){
      that.setData({
        testdata4: huancun,
      })  
    }else{
    //轮播请求
    wx.request({
      //url: app.globalData.site + '/Husbandry_Manage/WeiXinCasesServlet?type=picture&minitype=minilb',
      url: app.globalData.site + '/Husbandry_Manage/WeiXinCasesServlet',
      data: {
      },
      header: {
        'content-type': 'application/json'
      },
      method: 'POST',
      success: function (res) {
        //console.log(res.data[2].picture)
        //存入缓存
        wx.setStorageSync('lunbopic', res.data[2].picture)
        //设置数据
        that.setData({
          testdata4: res.data[2].picture,
        })
      }
    })
    }

//轮播点击事件,事件处理函数
  swiperclick: function (e) {
   var picid=e.target.dataset.id;
   console.log(picid)
   switch (picid) {
     case 1:
       wx.navigateTo({
         url: '../../pages/joinus/joinus',
       })
       break;
     case 2:
       wx.navigateTo({
         url: '../../pages/industry/industry',
       })
       break;
     case 3:
       wx.navigateTo({
         url: '../../pages/mall/mall',
       })
       break;
   }
  },

数据格式:


image.png
.swipersize{
  width:100%;
  height: 380rpx;
}
.slide-image{
    width: 100%;
    height: 380rpx;
}
上一篇下一篇

猜你喜欢

热点阅读