【文件属性】：
文件名称：loop-picker:模拟微信小程序官方 picker 的可循环滑动的wepy组件--loop-picker
文件大小：178KB
文件格式：ZIP
更新时间：2021-05-26 16:28:58
JavaScript
loop-picker
仅供学习参考
wepy 组件
模拟微信小程序官方picker的可循环picker--loop-picker.
使用感受没有官方的swiper流畅;
但交互上比picker类组件更好用, 支持循环滑动, 支持直接点击修改focus的值.
演示
编辑focus直接切换 item :
使用
# git clone ...
npm install
wepy build
# 微信开发者工具导入项目, 即可预览demo
核心原理
相关概念:
Item: 每个选择项
容器: 组件最外层容器
视窗: 展示item的区域
VH=VC: 视窗高度等于容器高度
vn: 指定视窗内显示多少个item, 必须奇数.
focus: 当前处于视窗正中的item, 即选中项.
top: 当前定位在最上面的item
bottom: 定位处于最下面的item
vhtop: 视窗内最上面的item.
先
【文件预览】：
loop-picker-master
----project.config.json(349B)
----src()
--------app.wpy(400B)
--------pages()
--------components()
----README.MD(5KB)
----assets()
--------loop-picker-demo.gif(128KB)
--------1559466838940.png(18KB)
--------1559467271918.png(4KB)
--------1559467896997.png(19KB)
--------loop-picker-demo-edit.gif(5KB)
----.wepyignore(46B)
----.prettierrc(26B)
----.editorconfig(147B)
----.gitignore(46B)
----wepy.config.js(1KB)
----package-lock.json(61KB)
----package.json(883B)