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

请管理员大大看一下，并肯请回复，谢谢！ 问题描述：小程序名称：橙子进销存，通过路径：微信=》发现=》小程序=》搜索，搜索关键字：进销存，发现： 之前排名：前三，现在排名：百名之外，差不多十几页之后，才可见。 我们很纳闷，从下面的情况来分析，怎么也不可能排名突然这么差的： 1.关键字：小程序名称里面有进销存，完全可以命中，而且小程序的名称长度，也不长，应该不影响权重 2.小程序上线时间：于2018-01-11完成微信认证审核，微信刚有小程序，我们的2个月之后就上线了，算得上老前辈了吧 3.评分：4.7分。评分应该算是很好的吧（这是你们微信自己做的评分体系） 4.产品质量：有上百个页面，在小程序中，完整的实现企业的进销存管理 。 5.至今没有任何违规纪录 让人匪夷所思的是：我们现在看到，搜索进销存，排名在前的上百个小程序，很多小程序不仅没有评分，甚至很大部分，就是简单的1-2个页面，还有很多，进去就是BUG，根本不能提供任何正常服务，但却排名在很靠前。 如果一个真实的用户，他需要进销存专业管理软件，找到却是这样结果，这样的产品，他会怎么看待微信小程序！难道不能引起微信的重视吗！ 做SAAS企业管理软件，本来就真的很苦，很难做了，希望微信一个大平台，能够建立一个更加公正透明的生态体系，促进生态的健康发展！！！ 搜索排名情况如下图： [图片]