基于vant商城组件库

前言

商城常用的组件开发基于vant ui开发，让商城开发变得更简单

以我整理的vue项目脚手架vue-h5-template为基础
开发商城组件库，高度组件化github地址

在这里你可以找到

1. 可拖拽悬浮按钮
2. 横向滚动导航栏
3. 。。。

线上体验

可拖拽悬浮按钮

vue开发手机端悬浮按钮实现，可以拖拽，滚动的时候收到里边，不影响视线

将 src/components文件夹下的s-icons组件放到你的组件目录下
使用组件

 // template



  

参数

字段名	类型	默认值	描述
padding	String	'10 10 10 10'	悬浮按钮可拖拽的安全范围，与 css padding 传参一致
scoller	String	''	监听页面滚动容器 id,不传时候监听 window （解决滚动时悬浮框按钮不收进去）

注意

如果滚滚动的时候收到里边，需要穿scoller参数
比如：
你的滚动列表外层div 设置id

组件传参 scoller="loadmore"

因为你可能使用组件导致监听的滚动元素是window，所以你需要将你的滚动容器的id传进我的组件

横向滚动导航栏

基于better-scroll开发，横向滚动导航栏

使用

将组件复制到你的组件目录下，传导航数组list ,注意你要修改barName，num为你自己的对象属性
点击切换navbar的时候触发change方法，

参数

字段名	类型	默认值	描述
list	Array	[]	导航数组

事件

事件名	说明	回调参数
change	切换导航项	{index: 该点击项的索引值,item:该点击项数据}

关于我

您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。

如果对你有帮助送我一颗小星星（づ￣3￣）づ╭❤～