Demo:
最终实现效果如下
接下来要实现的就是下面的,滚动条,显示横向拖动的进度。
Component代码:
index.js
Component({
properties: {
customStyle: {
type:String,
},
// 根据Slot中的元素计算出的ScrollView总宽度 rpx
scrollViewWidth: {
type: Number,
value: 0
},
// ScrollView的总高度,调整高度来控制显示行数 rpx
scrollViewHeight: {
type: Number,
value: 0
},
// 滚动条的宽度rpx
scrollBarWidth: {
type: Number,
value: 160
},
// 滚动条的高度 rpx
scrollBarHeight: {
type: Number,
value: 10
},
// 滚动条滑块的宽度 rpx
scrollBarBlockWidth: {
type: Number,
value: 100
},
// 滚动条样式
scrollBarStyle: {
type: String,
},
// 滚动滑块样式
scrollBarBlockStyle: {
type: String,
}
},
data: {
windowWidth: 375, // px
px2rpxRatio: 0,
windowWidth2ScrollViewWidthRatio: 0,
scrollBarBlockLeft: 0,
},
lifetimes: {
attached: function() {
this.data.windowWidth = wx.getSystemInfoSync().windowWidth
this.setData({
px2rpxRatio: Number(750 / this.data.windowWidth).toFixed(3)
})
console.log('px2rpxRatio', this.data.px2rpxRatio)
this.setData({
windowWidth2ScrollViewWidthRatio: Number(this.data.windowWidth * this.data.px2rpxRatio / this.data.scrollViewWidth).toFixed(3)
})
let scrollBarBlockWidth = Number(this.data.scrollBarWidth * this.data.windowWidth2ScrollViewWidthRatio).toFixed()
if(scrollBarBlockWidth >= this.data.scrollBarWidth) {
scrollBarBlockWidth = this.data.scrollBarWidth
}
this.setData({
scrollBarBlockWidth: scrollBarBlockWidth
})
},
},
})
index.wxml
<wxs module="wxs" src="./index.wxs"></wxs>
<view style="{{ customStyle }}">
<scroll-view scroll-x="{{ true }}" bind:scroll="{{ wxs.onScroll }}" data-px2rpxRatio="{{ px2rpxRatio }}" data-scrollViewWidth="{{ scrollViewWidth }}" data-scrollBarWidth="{{ scrollBarWidth }}">
<view class="scroll-view" style="height: {{ scrollViewHeight }}rpx">
<slot/>
</view>
</scroll-view>
<view class="scrollbar" style="width: {{ scrollBarWidth }}rpx; height: {{ scrollBarHeight}}rpx; margin: 0 auto; margin-top: 10rpx; {{ scrollBarStyle }}">
<view class="scrollbar-block" id="scrollbar" style="width: {{ scrollBarBlockWidth }}rpx; left: {{scrollBarBlockLeft}}rpx; {{ scrollBarBlockStyle }}"></view>
</view>
</view>
index.wxs
var onScroll = function(e, ownerInstance) {
var scrollBarBlockLeft = (e.detail.scrollLeft * e.currentTarget.dataset.px2rpxratio / (e.currentTarget.dataset.scrollviewwidth)) * e.currentTarget.dataset.scrollbarwidth
ownerInstance.selectComponent('#scrollbar').setStyle({left: scrollBarBlockLeft + 'rpx'})
}
module.exports = {
onScroll: onScroll
};
index.wxss
.scroll-view{
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.scrollbar {
margin: 0 auto;
background: black;
position: relative;
border-radius: 4rpx;
overflow: hidden;
}
.scrollbar-block {
height: 100%;
position: absolute;
top: 0;
background: darkred;
border-radius: 4rpx;
}
以上就是组件的代码部分,下面来看一看在Page页中如何使用,代码也很简单:
index.js
//index.js
Page({
data: {
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
}
})
index.wxml
<x-scroll-bar scroll-view-width="1200" scroll-view-height="400">
<view wx:for="{{ data }}" class="block" >
{{ item }}
</view>
</x-scroll-bar>
index.wxss
.block{
flex-shrink: 0;
flex-grow: 0;
background: black;
width: 200rpx;
height: 200rpx;
line-height: 200rpx;
text-align: center;
color: white;
}
.block:nth-child(even) {
background: red;
}
以上全部内容,组件代码已经在我的Github,可直接访问下载:
2个方法都不错,各有各的使用场景,感谢分享。
其实可以用 swiper 更加简单的实现类似功能,办法是监听 swiper 的 change 事件,并改变底下显示拖动进度元素的 transform:
https://developers.weixin.qq.com/s/BkonVsmv7ogQ
(如果要实现两个一排的话,先把所有项目按照两个元素一组分组,在把每个 swiper-item 作为对应分组的容器)