更新记录

1.0.2(2020-07-10)

更新小程序里value错误

1.0.1(2020-07-09)

支持设置文字和图标的 Switch

说明: 1、支持H5和微信小程序,其他终端未测试过 2、支持更换颜色风格 3、支持文字选择 和 图标选择2种模式

查看更多

支持设置文字和图标的 Switch

说明: 1、支持H5和微信小程序,其他终端未测试

2、支持更换颜色风格

3、支持文字选择 和 图标选择2种模式

使用方法:

1、导入插件或下载插件包,把插件放到对应的目录

2、直接在html 代码里使用

<yjy-switch
    @switchFunction="switchChangeFun"
    :switchType="'icon'"
    :defaultColor="'#fd5c25'"
    :highColor="'#FFFFFF'"
    :defaultValue="switchDefaultValue"
    :switchList="switchListIcon"
    :itemIndex="0"
></yjy-switch>

3、在JS代码里需要定义switch所需要的数组和方法



    export default {

        data() {
            return {
                //设置默认值
                switchDefaultValue: 0,
                //文本switch的可选值,仅支持2个数组
                switchListText: [{
                        title: '是',
                        value: 1
                    },
                    {
                        title: '否',
                        value: 0
                    }
                ],
                //图标switch可选值,value为字体图标名称。仅支持2个值
                switchListIcon: [{
                        title: 'uni-icon-qq',
                        value: 0
                    },
                    {

                        title: 'uni-icon-weixin',
                        value: 1
                    }
                ] 
            };
        },
        methods: {
            //切换事件
            switchChangeFun(e) {
                console.log('触发 switchChangeFun');
                console.log(e);
                //重新赋值,改变该值用于设置switch默认值
                this.switchDefaultValue = e.swithcSelectItem.value;
            }
        }
    };

属性说明

属性名 类型 默认值 说明
switchFunction function - 点击switch的事件
switchType string text switch的类别,text文本,icon图标
defaultColor string #30C58D 默认颜色(边框和选中背景颜色)
highColor string #FFFFFF 高亮的文字颜色
defaultValue int 0 默认选中的索引值,0或1
switchList array - swtich选择值数据
itemIndex int 0 如果是在循环内引用,则该值为当前循环索引,用于切换后来操作对象的值

switchList 默认值(文本模式)

[
  {
     title: '是',
     value: 1

  },
  {
     title: '否',
     value: 0
  }
]

实操案例请下载示例跑起来看看

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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