vue 自己写个横向滚动列表吧
手动写个横向滚动列表吧
·
手动写个横向滚动列表吧,其实在uview中也有该组件,但是不支持具体的业务需要和样式需求,因此决定自己手写一个了
直接上代码吧,对你有用的话请点个赞哦
html
<!-- 渲染的tab栏,需要加个scroll-view,使其横向滚动 -->
<view class="tab-box">
<scroll-view scroll-x="true" class="tab" @scroll="scrollEvent" @touchmove.stop>
<view class="scroll-tab" v-for="(item, index) in tab" :key="index">
<view class="content" :style="{ width: `${screenWidth}px` }">
<view class="img-box">
<img class="img" :src="$imgUrl(item.url)" alt="" />
</view>
<view class="text">{{ item.title }}</view>
</view>
</view>
</scroll-view>
<!-- 滚动条 -->
<!-- <view class="scroll">
<view class="scroll-box">
<view
class="action"
:style="{ marginLeft: scrollPercent }"
></view>
</view>
</view> -->
</view>
js
data() {
return {
scrollPercent: '',
screenWidth: '100%',
}
}
mounted() {
let _this = this
uni.getSystemInfo({
success: function (res) {
// 30是你的内外边距 5是你在当前页面要放几个
_this.screenWidth = (res.windowWidth - 30) / 5
},
})
},
scrollEvent(e) {
let offsetWidth
uni.getSystemInfo({
success: function (res) {
offsetWidth = res.windowWidth
},
})
// 滚动长度百分比
let scrollLeft = Math.floor(
(e.detail.scrollLeft * 100) / (e.detail.scrollWidth - offsetWidth)
)
// (里面滑块长度/滚动条总长度)*滚动长度百分比
let scrollNum = (((this.scrollIndexWidth * 100) / this.scrollWidth) * scrollLeft) / 10000
scrollNum < 0 ? (scrollNum = 0) : (scrollNum = scrollNum)
scrollNum > 0.5 ? (scrollNum = 0.5) : (scrollNum = scrollNum)
this.scrollPercent = toPercent(scrollNum)
},
css
// tab栏
.tab-box {
margin: 40rpx 30rpx;
.tab {
white-space: nowrap;
margin-bottom: 32rpx;
margin-top: -20rpx;
overflow-y: hidden;
.scroll-tab {
display: inline-block;
}
.content {
text-align: center;
}
.img-box {
text-align: center;
.img {
text-align: center;
width: 64rpx;
height: 64rpx;
}
}
.text {
font-size: 22rpx;
color: #4b4d50;
opacity: 0.7;
margin-top: 6rpx;
white-space: nowrap;
}
}
.tab::-webkit-scrollbar {
width: 0;
}
.tab::-webkit-scrollbar {
display: none !important;
width: 0px;
height: 0px;
}
// 滚动条
.scroll {
display: flex;
justify-content: center;
.scroll-box {
border-radius: 2rpx;
background-color: #d8d8d8;
height: 4rpx;
width: 40rpx;
.action {
border-radius: 2rpx;
background-color: $themeColor;
height: 4rpx;
width: 20rpx;
}
}
更多推荐
已为社区贡献11条内容
所有评论(0)