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

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

 

                                          

 

 

在项目中新建一个组件,将下面代码复制进去可直接运行.

wxml结构如下:

<view class='index_tab'>
      <scroll-view class="bottom_scroll" scroll-x="true" scroll-left="{{x}}" scroll-with-animation="{{true}}">
         <view class='nav {{item.brand_id == brand_id?"cur":""}}' wx:for="{{nav_list}}"  wx:key="{{item.brand_id}}"  data-id="{{item.brand_id}}"
         bindtap='switchTap' data-index="{{index}}">
          <view>{{item.brand_name}}</view>
          <span></span>
         </view>
      </scroll-view>
 </view>

  使用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;
  color:#6f7580;
  font-size:30rpx;
  position: relative;
}
.index_tab .cur
{
    font-size:32rpx;
    color: #333;
    font-weight: bold;
} 
.index_tab .cur span{
  width:50rpx;
  height: 8rpx;
  border-radius: 5rpx;
  background: #ff8700;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
}

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

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

 

js内容如下:

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

Component({
  data: {
    x:0,
    //测试数据,实际项目中引入自己的数据
    nav_list:[
      {
       brand_id:0,
       brand_name:"服务器"
      },
      {
       brand_id:1,
       brand_name:"CPU"
      },
      {
       brand_id:2,
       brand_name:"硬盘"
      },
      {
       brand_id:3,
       brand_name:"SSD"
      },
      {
       brand_id:4,
       brand_name:"HDD"
      },
      {
       brand_id:5,
       brand_name:"主板"
      },
      {
       brand_id:6,
       brand_name:"显卡"
      },
      {
       brand_id:7,
       brand_name:"IO设备"
      },
    ],
    brand_id:0 // 当前选中的id值
 },
  methods: {
    switchTap(e){ //更换资讯大类
 
      let screenWidth = wx.getSystemInfoSync().windowWidth;
  
      let itemWidth = screenWidth/5;
  
      let { index,id } = 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,
        brand_id:id
      })

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

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

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

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

  

 

尾言

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