更新记录

1.0.1(2021-10-22) 下载此版本

插件说明

这是 sliderOverlay 插件的升级版本,参数上有很大变动,支持 H5 小程序 手机端,如果是在之前的插件上升级的话,请注意参数的变更,触发的事件没有变更。

使用说明

1、最基本用法

  • 视图文件
<sliderOverlay :sliderList="sliderList"></sliderOverlay>
  • 脚本文件
export default {
  data() {
    return {
      sliderList: [{
                        id:1,
                        time:'2021-22-01',
                        title:'生生测肤',
                        bgColor:'#ffff43',
                        name:'张莎',
                        skip:'油性肌肤',
                        zIdex:3,
                        userAvatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637396201&t=9ed9a1753bb76f8511af2b96081d131d',
                        skipQues:[
                            {
                                quesName:'油性',
                                color:'#002322'
                            },
                            {
                                quesName:'轻度色斑',
                                color:'#442322'
                            },
                            {
                                quesName:'轻度过敏',
                                color:'#eeaa22'
                            }
                        ]
                    },
                    {
                        id:2,
                        time:'2021-72-01',
                        title:'生生测肤1',
                        bgColor:'#aa2222',
                        name:'张莎2',
                        skip:'油性肌肤2',
                        zIdex:2,
                        userAvatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637396201&t=9ed9a1753bb76f8511af2b96081d131d',
                        skipQues:[
                            {
                                quesName:'油性2',
                                color:'#002323'
                            },
                            {
                                quesName:'轻度色斑3',
                                color:'#442333'
                            },
                            {
                                quesName:'轻度过敏4',
                                color:'#eeaa92'
                            }
                        ]
                    }
                ]
    }
  }
}

文档说明

1、属性说明

参数 类型 默认值 说明
sliderList Array [] 必传(双向绑定的值)

2、事件说明

名称 参数 说明
click id 改变选中项触发, id 选中项的下标

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

插件说明

这是 sliderOverlay 插件的升级版本,参数上有很大变动,支持 H5 小程序 手机端,如果是在之前的插件上升级的话,请注意参数的变更,触发的事件没有变更。

使用说明

1、最基本用法

  • 视图文件
<sliderOverlay :sliderList="sliderList"></sliderOverlay>
  • 脚本文件
export default {
  data() {
    return {
      sliderList: [{
                        id:1,
                        time:'2021-22-01',
                        title:'生生测肤',
                        bgColor:'#ffff43',
                        name:'张莎',
                        skip:'油性肌肤',
                        zIdex:3,
                        userAvatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637396201&t=9ed9a1753bb76f8511af2b96081d131d',
                        skipQues:[
                            {
                                quesName:'油性',
                                color:'#002322'
                            },
                            {
                                quesName:'轻度色斑',
                                color:'#442322'
                            },
                            {
                                quesName:'轻度过敏',
                                color:'#eeaa22'
                            }
                        ]
                    },
                    {
                        id:2,
                        time:'2021-72-01',
                        title:'生生测肤1',
                        bgColor:'#aa2222',
                        name:'张莎2',
                        skip:'油性肌肤2',
                        zIdex:2,
                        userAvatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637396201&t=9ed9a1753bb76f8511af2b96081d131d',
                        skipQues:[
                            {
                                quesName:'油性2',
                                color:'#002323'
                            },
                            {
                                quesName:'轻度色斑3',
                                color:'#442333'
                            },
                            {
                                quesName:'轻度过敏4',
                                color:'#eeaa92'
                            }
                        ]
                    }
                ]
    }
  }
}

文档说明

1、属性说明

参数 类型 默认值 说明
sliderList Array [] 必传(双向绑定的值)

2、事件说明

名称 参数 说明
click id 改变选中项触发, id 选中项的下标

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问