最新：2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段，以下文章内容和就不改了 刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段，需要的大哥拿去随便改改，先看效果图： [图片] 代码如下： wxml [代码]<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" > <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick"> <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view> <view class="currtline {{currentTab === index ? 'active' : ''}}"></view> </view> </scroll-view> [代码] wxss [代码].scroll-wrapper { white-space: nowrap; -webkit-overflow-scrolling: touch; background: #FFF; height: 90rpx; padding: 0 32rpx; box-sizing: border-box; } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .navigate-item { display: inline-block; text-align: center; height: 90rpx; line-height: 90rpx; margin: 0 16rpx; } .names { font-size: 28rpx; color: #3c3c3c; } .names.active { color: #00cc88; font-weight: bold; font-size: 34rpx; } .currtline { margin: -8rpx auto 0 auto; width: 100rpx; height: 8rpx; border-radius: 4rpx; } .currtline.active { background: #47CD88; transition: all .3s; } [代码] JS [代码]const app = getApp() Page({ data: { currentTab: 0, taskList: [{ name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, { name: '有趣好玩' }, ] }, onLoad() { }, handleClick(e) { let currentTab = e.currentTarget.dataset.index this.setData({ currentTab }) }, }) [代码] 最后奉上代码片段： https://developers.weixin.qq.com/s/nkyp64mN7fim

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