前言
商场里的一个小需求
小程序 scroll-view 开发一个可以滚动的 tab 组件，当点击大于屏幕二分之一标签时，将其移动到中间，点击向下的箭头展开所有，进行选择
项目 github 地址
vue 版本戳这里 vue 时 better-scroll 实现的类似的效果
使用
git clone https://github.com/sunnie1992/soul-weapp.git开发者工具直接打开运行
将 components 下 s -tab-scoller 放到你的目录下
// 在你的页面 json 中引用
{
"navigationBarTitleText": "横向滚动",
"usingComponents": {"s-tab-scoller": "/components/s-tab-scoller/index"}
}
wxml 使用
<s-tab-scoller list="{{list}}" bindchange="navChange"></s-tab-scoller>实现
组件接受一个 list 参数，我们有两个参数要展示，标题和数量，开发者可以根据不同的需求进行修改
选择标签项触发 chooseNav 方法
// components/s-float-icons/index.js
Component({externalClasses: ['ex-class'],
properties: {list: Array},
options: {multipleSlots: true},
data: {
showNavDrap: false,
navIndex: 0,
navScrollLeft: 0
},
/**
* 组件的方法列表
*/
methods: {showAllNav() {
this.setData({showNavDrap: !this.data.showNavDrap})
},
// 选择
chooseNav(e) {
var item = e.currentTarget.dataset.item
var index = e.currentTarget.dataset.index
var pop = e.currentTarget.dataset.pop
// 点击弹出的选项（pop 区分的是选择的是滚动的 tab 还是下拉的 tab）if (pop) {
this.setData({showNavDrap: !this.data.showNavDrap})
}
var _this = this
// 设置当前位置
const query = wx.createSelectorQuery().in(this)
query
.selectAll('.label-item')
.boundingClientRect(function(rect) {
let width = 0
// 循环获取计算当前点击的标签项距离左侧的距离
for (let i = 0; i < index; i++) {width += rect[i].width
}
// 当大于屏幕一半的宽度则滚动，否则就设置位置为 0
let clientWidth = wx.getSystemInfoSync().windowWidth / 2
if (width > clientWidth) {
_this.setData({navScrollLeft: width + rect[index].width / 2 - clientWidth
})
} else {
_this.setData({navScrollLeft: 0})
}
})
.exec()
// 设置当前样式选中
this.setData({navIndex: index})
this.triggerEvent('change', item)
}
}
})
关于我
您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。