vant-shop-demo
商城常用的组件开发基于 vant ui 开发，让商城开发变得更简单
以我整理的 vue 项目脚手架vue-h5-template为基础
开发商城组件库，高度组件化 项目介绍
在这里你可以找到
- 可拖拽悬浮按钮
- 横向滚动导航栏
- 生成海报图
- vue keep-alive 返回浏览位置
本地运行
git clone https://github.com/sunniejs/vant-shop-demo.git
npm run serve
线上体验
可拖拽悬浮按钮
vue 开发手机端悬浮按钮实现，可以拖拽，滚动的时候收到里边，不影响视线
参数
| 字段名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| padding | String | '10 10 10 10' | 悬浮按钮可拖拽的安全范围，与 css padding 传参一致 |
| scoller | String | '' | 监听页面滚动容器 id,不传时候监听 window （解决滚动时悬浮框按钮不收进去） |
注意
如果滚滚动的时候收到里边，需要穿 scoller 参数比如：你的滚动列表外层 div 设置 id
<div id="loadmore">
<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
<van-cell v-for="item in list" :key="item" :title="`我是你的小仙女，爱你第${item}遍`" />
</van-list>
</div>组件传参 scoller="loadmore"
<float-icons **scoller="loadmore" ** padding="10 10 60 10" class="icons-warp"></float-icons>因为你可能使用组件导致监听的滚动元素是 window，所以你需要将你的滚动容器的 id 传进我的组件
横向滚动导航栏
基于 better-scroll 开发，横向滚动导航栏
##使用将组件复制到你的组件目录下，传导航数组 list 点击切换 navbar 的时候触发 change 方法，
参数
| 字段名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | Array | [] | 导航数组 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 切换导航项 | {index: 该点击项的索引值,item:该点击项数据} |
问题反馈
有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息
关于我
获取更多技术相关文章，关注公众号”前端女塾“。
回复加群，即可加入”前端仙女群“
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭