美文网首页
页面-轮播图-点击跳转

页面-轮播图-点击跳转

作者: forsek | 来源:发表于2018-03-15 17:15 被阅读0次
    //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;
    }
    

    相关文章

      网友评论

          本文标题:页面-轮播图-点击跳转

          本文链接:https://www.haomeiwen.com/subject/slzrtftx.html