评论

WXS仿拼多多横向滚动条ScrollView组件

仿拼多多、淘宝首页横向滑动条的实现,可自定义显示行数

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,可直接访问下载:

https://github.com/foolstack-omg/fool-weapp

最后一次编辑于  2020-04-08  
点赞 4
收藏
评论

2 个评论

  • Admin ²º²⁴
    Admin ²º²⁴
    2020-05-17

    2个方法都不错,各有各的使用场景,感谢分享。

    2020-05-17
    赞同
    回复
  • am1n0
    am1n0
    2020-04-08

    其实可以用 swiper 更加简单的实现类似功能,办法是监听 swiper 的 change 事件,并改变底下显示拖动进度元素的 transform:

    https://developers.weixin.qq.com/s/BkonVsmv7ogQ

    (如果要实现两个一排的话,先把所有项目按照两个元素一组分组,在把每个 swiper-item 作为对应分组的容器)

    2020-04-08
    赞同
    回复 1
    • 渣渣峰
      渣渣峰
      2020-04-08
      Swiper使用起来是一块一块移动的效果,还是有区别的
      2020-04-08
      1
      回复
登录 后发表内容