因为官方的 slider 只有横向的，所以按照官方的slider写了个纵向的，用 wxs 处理的事件（出了这么久了，却没有怎么用过。。）。代码片段如下 https://developers.weixin.qq.com/s/qYLgcDmC7Air 没什么难点，本来想着几行就写完了。。意料之外的多了些代码。。主要有几点想吐槽的 wxs 里的getState是用来存公共临时变量的。为什么不直接在 wxs里定义一个变量呢？因为如果有多个组件的话，这些变量会共享。另外还要注意下面的情况 [代码] var state = getState() state.value = 1 // 正确 state = {value: 1} // 错误 [代码] 点击事件是加到线条上的，线条本身太窄了，加了padding扩大点。另外，头尾两个位置应该是用户最常用的点击，但是却不怎么好点到，甚至根本点不到，所以在两头各加了2个view来直接设置最大最小值。 想点着圆点滑动的时候，偶尔会点到滚动条上，结果造成页面滑动，所以在最外面加了 touchmove 绑定了空方法。 为什么这个组件需要有 show-value 的配置。。感觉特别鸡肋。。 早先发到群里的那一版不太好，没优化，而且value的设置忘了减去 min了。。哈哈哈。。抱歉。。

本月份的组件分享，事件效果由 wxs事件完成，注释在代码片段里有。 按钮可拖动，子菜单上没有点击事件，是根据touchend位置来判断点击的谁。有bug欢迎反馈 代码片段：https://developers.weixin.qq.com/s/9BNYnhmG7tcl 社区这会儿效果图gif上传不了。。不是我的错 图标iconfont下的，没版权问题吧。。

简单的siwper效果，又是逛社区发现老哥提的想要该效果，那么有需要，咱们就得上啊： 效果图： [图片] 上代码： wxml [代码]<view class="container"> <swiper duration="200" previous-margin="140rpx" next-margin="140rpx" bindchange="currentHandle" circular="{{true}}" class="swiper-out"> <block wx:for="{{punchList}}" wx:key="*this"> <swiper-item class="swp-item {{current === index ?'active-item': ''}}"> <view class="slide-image" style=" background: url({{item.bannerUrl}}) no-repeat center center;background-size: 100% 100%;" id="{{index}}"></view> </swiper-item> </block> </swiper> <view class="swp-dot"> <view class="square-12 m-r-8 {{current === index ?'active': ''}}" wx:for="{{punchList}}" wx:key="{{index}}"></view> </view> </view> [代码] JS [代码]const app = getApp() Page({ data: { punchList: [{ "bannerUrl": "https://qiniu-image.qtshe.com/1536067857379_122.png" }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068379879_115.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068319939_230.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068074140_695.png", }, { "bannerUrl": "https://qiniu-image.qtshe.com/1536068213758_796.png", }], current: 0 }, currentHandle(e) { let { current } = e.detail this.setData({ current }) } }) [代码] wxss [代码].container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; } .slide-image { height: 600rpx; width: 400rpx; margin-top: 20rpx; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10rpx; } .swiper-out { width: 750rpx; height: 660rpx; margin-top: 60rpx; } .active-item .slide-image { box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15); } .swp-item { width: 400rpx; display: flex; flex-direction: column; align-items: center; padding-top: 4rpx; opacity: 0.6; } .active-item { opacity: 1; } .swp-dot { display: flex; justify-content: center; flex: 1; margin-top: 18rpx; } .m-r-8 { margin-right: 8rpx; } .m-l-8 { margin-right: 8rpx; } .square-12 { width: 12rpx; height: 12rpx; background-color: #d8d8d8; border-radius: 6rpx; transition: width 0.2s linear; } .active { background-color: #3c3c3c; width: 36rpx; transition: width 0.2s linear; } [代码] 代码放完了，看下效果吧。代码片段如下： https://developers.weixin.qq.com/s/DCK6HJmw7kaZ