郑州网站建设,郑州网站制作,郑州做网站,巩义网站建设,荥阳网站建设,偃师网站制作-全栈网络

巩义手机网站制作中使用swiper及scroll-view制作选项卡
当前位置:首页 > 建站技巧 > 网站代码 >

巩义手机网站制作中使用swiper及scroll-view制作选项卡

时间: 2019-02-23 分类: 网站代码 浏览次数:

在巩义手机网站项目制作中,以及小程序制作开发中,在数据列表界面会使用到swiper切换效果,同时搭配scroll-view来实现选项卡的制作,具体代码如下演示: 1.html/xhml页面代码演示:...

在巩义手机网站项目制作中,以及小程序制作开发中,在数据列表界面会使用到swiper切换效果,同时搭配scroll-view来实现选项卡的制作,具体代码如下演示:


1.html/xhml页面代码演示:
 
 <scroll-view scroll-x style="width: 100%" class='soloo' scroll-left="{{scrollLeft}}" scroll-with-animation="true">
    <view class="tab-item {{currentTab == index ?'active':''}}" 
          data-current="{{index}}" data-id="{{item.id}}"
          bindtap="swichNav" wx:key="listClassify"  wx:for="{{listClassify}}" wx:for-index="index">{{item.name}} </view>
  </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}"  duration="300" bindchange="switchTab"  style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{listClassify}}" wx:key='index' >
      </swiper-item>
  </swiper>

2.javascript逻辑代码演示:

  /**
   * 页面的初始数据
   */
  data: {
    winHeight: "", //窗口高度
    currentTab: 0, //预设当前选项的index ,这里可以直接设置swiper对应的index
    scrollLeft:'', //距离左边的距离
    clientWidth:'', //屏幕的宽度
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //  选项卡高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 88;
        that.setData({
          winHeight: calc,
          cityid: cityid,
          clientWidth: clientWidth
        });
      }
    });
  },
  // 滚动切换标签样式
  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  // 切换选项卡标签样式
  switchTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    }); 
    this.eady()
    this.huoqu(2, that.data.clasifys[e.detail.current]);
  },
  //获取节点宽度 把之前的相加起来 等于滚动条距离left的距离,设置滚动条的距离 
  eady:function () {
       var self = this;
        //获取导航的初始位置
        const query = wx.createSelectorQuery()
      query.selectAll('.tab-item').boundingClientRect();
        query.exec(function (res) {
//遍历当前的tab栏 之前的所有dom节点的宽 相加设置为滚动条滚去的scrollLeft 
          var num=0;
          for (var i = 0; i < self.data.currentTab;i++){
            num += res[0][i].width
          }
          self.setData({
            scrollLeft: Math.ceil(num)
          })
        })
  },
 
通过以上两部分代码即可实现一个手机网站制作中的选项卡切换,同时支持数据的动态获取及导航的动态获取。
 
 
本文关键词: scroll-view 未经允许不得转载:郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络



Copyright © 2017-2020 版权所有:全栈网络工作室 备案号:豫ICP备17039206号-1 HTML网站地图
郑州网站建设|郑州网站制作|郑州做网站|巩义网站制作|荥阳做网站|偃师网站制作-全栈网络