uni-app实现组件菜单左右滑动并点击切换(选中居中显示)
先看下效果效果一: 可直接使用scroll-into-view属性实现 或者 也可使用scroll-left思路:第一种,scroll-into-view 绑定一个动态 ID,子元素循环产出ID,点击时进行绑定(这次就不做代码产出了)第二种,计算每个子元素的宽度,点击时获取当前点击元素前面的元素宽度之和效果二:使用scroll-left思路:计算每个子元素的宽度,点击时获取当前点击元素索引 - 1
·
先看下效果
效果一: 可直接使用 scroll-into-view 属性实现 或者 也可使用 scroll-left
思路:第一种, scroll-into-view 绑定一个动态 ID,子元素循环产出ID,点击时进行绑定(这次就不做代码产出了)
第二种, 计算每个子元素的宽度,点击时获取当前点击元素前面的元素宽度之和
效果二:使用 scroll-left
思路:计算每个子元素的宽度,点击时获取当前点击元素索引 - 1 的前面元素宽度之和,相比于效果一的第二种情况,这里少算当前点击元素前面的一个元素的宽度,实现留一
效果三:使用 scroll-left
思路:当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半 + 当前点击子元素一半的宽度 实现居中展示
<template>
<view class="center-cut-menu">
<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
<view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
id: 1,
name: '星期一'
},
{
id: 2,
name: '星期二'
},
{
id: 3,
name: '星期三'
},
{
id: 4,
name: '星期四'
},
{
id: 5,
name: '星期五'
},
{
id: 6,
name: '星期六'
},
{
id: 7,
name: '星期七'
},
{
id: 8,
name: '星期八'
},
{
id: 9,
name: '星期九'
},
{
id: 10,
name: '星期十'
}
],
contentScrollW: 0, // 导航区宽度
curIndex: 0, // 当前选中
scrollLeft: 0, // 横向滚动条位置
}
},
mounted() {
// 获取标题区域宽度,和每个子元素节点的宽度
this.getScrollW()
},
methods: {
// 获取标题区域宽度,和每个子元素节点的宽度以及元素距离左边栏的距离
getScrollW() {
let query = uni.createSelectorQuery().in(this);
query.select('.scroll-view').boundingClientRect(data => {
// 拿到 scroll-view 组件宽度
this.contentScrollW = data.width
}).exec();
query.selectAll('.scroll-item').boundingClientRect(data => {
let dataLen = data.length;
for (let i = 0; i < dataLen; i++) {
// scroll-view 子元素组件距离左边栏的距离
this.list[i].left = data[i].left;
// scroll-view 子元素组件宽度
this.list[i].width = data[i].width
}
}).exec()
},
// 选择标题
changeMenu(index) {
this.curIndex = index;
// 效果一(当前点击子元素靠左展示) 局限性:子元素宽度相同
// this.scrollLeft = index * this.list[index].width
// 效果一(当前点击子元素靠左展示) 子元素宽度不相同也可实现
// this.scrollLeft = 0;
// for (let i = 0; i < index; i++) {
// this.scrollLeft += this.list[i].width
// };
// 效果二(当前点击子元素靠左留一展示) 局限性:子元素宽度相同
// this.scrollLeft = (index - 1) * this.list[index].width
// 效果二(当前点击子元素靠左留一展示) 子元素宽度不相同也可实现
// this.scrollLeft = 0;
// for (let i = 0; i < index - 1; i++) {
// this.scrollLeft += this.list[i].width
// };
// 效果三(当前点击子元素居中展示) 不受子元素宽度影响
this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;
}
}
}
</script>
<style lang="scss">
.center-cut-menu {
width: 100%;
height: 100rpx;
box-sizing: border-box;
.scroll-view {
height: 100rpx;
white-space: nowrap;
.scroll-item {
height: 100rpx;
padding: 0 20rpx;
display: inline-block;
text-align: center;
.item-text {
font-size: 30rpx;
line-height: 100rpx;
&.active {
color: #1468FF;
}
}
}
}
}
</style>
注: 支付宝小程序不支持in(component),使用无效果
如果对你有用,关注一下博主的小程序,登录一下给予支持,以后有什么开源好用的源码都会上传到小程序
更多推荐
已为社区贡献21条内容
所有评论(0)