微信小程序--实现横向导航滚动

    目前在移动端头部横向导航属于一种很常见的页面结构,例如今日头条、网易新闻都采用了此方式将新闻进行分类.本篇文章以微信小程序为基础,实现横向滚动导航.最终的实现效果如下:

 

                                          

 

 

wxml结构如下:

 
      

         
          {
    {item.brand_name}}
         

      
 

  使用scroll-view标签做横向导航的容器,它有几个比较重要的属性:

    1.scroll-x:置为true允许横向滚动

    2. scroll-left: 将此属性与页面的状态值x相映射,这个属性是点击导航名称时执行滚动的关键,它决定了横向滚动框应该滚动多少

距离。当改变x的值时,横向滚动框也会滚动到相应的位置.

    3.scroll-width-animation:滚动的过程是否有动画效果

 

wxss内容如下:

.index_tab .bottom_scroll{
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  line-height:83rpx;
}
.index_tab .bottom_scroll .nav{
  width:20%;
  display:inline-block;
  white-space:normal;
  text-align:center;
  font-size: 26rpx;
}

    这里需要提及的一点就是将每个导航项的宽度都设置为了20%,那么意味着屏幕中最多只能容纳5个导航项并且每个导航项的

宽度都相等.这个特征针对后面动态计算x的值很关键.

 

js内容如下:

每次点击导航项时执行下面的函数

 methods: {
   
    switchTap(e){ //更换资讯大类
 
      let screenWidth = wx.getSystemInfoSync().windowWidth;

      let itemWidth = screenWidth/5;

      let { index,type } = e.currentTarget.dataset;

      const { nav_list } = this.data;
      
      let scrollX = itemWidth * index - itemWidth*2;

      let maxScrollX = (nav_list.length+1) * itemWidth;
      
      if(scrollX<0){
        scrollX = 0;
      } else if (scrollX >= maxScrollX){
        scrollX = maxScrollX;
      }

      this.setData({
        x: scrollX
      })

      this.triggerEvent("switchTap", type); //点击了导航,通知父组件重新渲染列表数据

    }
  }

  1.第一步计算出屏幕宽度,由于5个导航项宽度占满全屏,从而计算出每个导航项的宽度itemWidth.(实际项目开发中需要把screenWidth 和itemWidth提取出来,因为它们在手机宽度确定了的情况下恒定不变,所以只需要计算一次即可)

  2.获取到当前被点击的导航项的索引index,计算出当它居中时横向滚动框应该滚动的距离.itemWidth*index是滚动到最左侧的距离,再减去itemWidth*2就刚好等于了滑动到中间的距离.

  这个滚动的距离既不能小于0,也不能比最大的长度还长(这个最大的长度就是所有的导航项的宽度的总和).然后赋值给x让滚动条滚动.

  

 

尾言

  欢迎扫下面前端技术群,有任何技术问题可以在群里面与大家相互沟通.