目前在移动端头部横向导航属于一种很常见的页面结构,例如今日头条、网易新闻都采用了此方式将新闻进行分类.本篇文章以微信小程序为基础,实现横向滚动导航.最终的实现效果如下:
在项目中新建一个组件,将下面代码复制进去可直接运行.
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让滚动条滚动.
尾言
欢迎扫下面前端技术群,有任何技术问题可以在群里面与大家相互沟通.