小程序 横向滚动导航栏
先上案例最终效果:
案例实现功能:
1.导航栏横向滚动效果
2.当前元素有下划线标识
3.点击元素,导航栏滚动到相应位置
以下将分步骤逐步完善陈述这些功能,最终会呈现所有代码
1.引用组件scroll-view,达到滚动效果
万丈高楼平地起,首先要达到横向滚动的效果
wxml
<view>
<scroll-view scroll-x="true" enable-flex="true" class="scroll">
<block wx:for="{{ nav }}" wx:for-item="item" wx:for-index="index" wx:key="index">
<view class="nav-item">
{{ item }}
</view>
</block>
</scroll-view>
</view>
scroll-view:小程序原生组件,使得里面的元素可以左右或上下滚动,scroll-x设置内容横向滚动,enable-flex允许内容使用flex布局(这里只是允许,还需要在相应的class中还需要添加flex布局语句,即display:flex;)
block与view:在小程序中block是不做数据渲染的,它本身在页面中不占据任何空间,它用于做逻辑处理的容器,与wx:for,wx:if等属性联用。以上代码把for放到view最终效果是一样的。
wxss
.scroll {
width: 90%;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
display: flex;
/* 超出部分隐藏 */
overflow: hidden;
/* 文本不换行 */
white-space: nowrap;
}
.nav-item {
margin-right: 20rpx;
}
截至到此处只引用了js代码中一个nav数组
2.点击元素时添加下划线标识,并滚动到相应位置(最终效果)
实现思路:
1.添加下滑线标识:给元素添加点击事件,并动态绑定class,点击某个元素,传递此元素的下标到绑定方法中,该表变量current的值为当前下标,如此一来,在动态绑定的class中current对应某个index,触发current-nav样式
2.滚动位置:在点击元素之后,动态设置scroll-left的值,即可控制滚动条滚动距离。问题在于我们要滚动多少距离?我的设置是滚动距离为使得每个项的左边界位于手机屏幕的中间,若距离不够则保留默认滚动距离。微信小程序的特殊优势,点击事件方法的参数(events)中包含点击元素的横向滚动宽度,我们拿到这个值,再获取手机宽度即可
wxml
<view>
<scroll-view scroll-x="true" enable-flex="true" class="scroll" scroll-left="{{ scrollLeft }}" scroll-with-animation="true">
<block wx:for="{{ nav }}" wx:for-item="item" wx:for-index="index" wx:key="index">
<view class="nav-item {{ current==index?'current-nav':'' }}" bindtap="currentNav" data-index="{{ index }}" >
{{ item }}
</view>
</block>
</scroll-view>
</view>
scroll-left:控制滚动条向左滚动距离,默认为0;
scroll-with-animation:滚动效果
data-index="{{ index }}":传递点击元素的下标
js
// pages/nav/nav.js
Page({
/**
* 页面的初始数据
*/
data: {
nav: ['全部','水果蔬菜','家电','图书','生活用品','测试','还是测试','依然是测试'],
// 当前项目
current: 0,
// 滚动栏滚动距离
scrollLeft: 0,
// 窗体宽度
windowWidth: 0
},
onLoad: function (options) {
// 设置标题
wx.setNavigationBarTitle({
title: '导航栏案例',
});
// 获取窗体宽度
wx.getSystemInfo({
success: (result) => {
this.setData({
windowWidth: result.windowWidth
})
},
})
},
/**
*
* 导航栏点击响应事件
*
* 1.点击项目出现下滑线
* 2.点击项目,导航栏滚动,使得项目出现再屏幕固定位置
*
*/
currentNav: function (e) {
console.log(e);
let index = e.currentTarget.dataset.index;
let scrollLeft = e.currentTarget.offsetLeft - ( this.data.windowWidth * 0.9 ) / 2;
this.setData({
current: index,
scrollLeft: scrollLeft
})
}
})
因为我的滚动条设置宽度为屏幕的90%,所以计算滚动位置时略有不同,逻辑跟上面的陈述一致
打印currentNav的参数:
offsetLeft:点击元素的横向距离
index:元素的下标(我点击了第二个元素)
wxss
.scroll {
width: 90%;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
display: flex;
/* 超出部分隐藏 */
overflow: hidden;
/* 文本不换行 */
white-space: nowrap;
}
.nav-item {
margin-right: 20rpx;
}
// 添加下边界
.current-nav {
border-bottom: 1px solid #f86442;
}
无论是小程序还是web项目,做相似的功能时,实现的思路是一致的,只是使用的工具不同。解决问题的思路是一切的开始,也是最重要的部分。