微信小程序自定义checkbox/button

最新推荐文章于 2024-09-12 17:43:39 发布

weixin_43847971

最新推荐文章于 2024-09-12 17:43:39 发布

阅读量259

点赞数 3

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/weixin_43847971/article/details/140298662

版权

自定义checkbox或button，任意设置图片和文字，点击改变背景和文字，有抖动效果。如下图的接收、HEX、清空、更多。
在这里插入图片描述
具体代码如下：

1、custom_button.js

Component({

    /**
     * 组件的属性列表
     */
    properties: {
        label:String,
        img:String,
    },

    /**
     * 组件的初始数据
     */
    data: {
    },

    //组件初始化
    attached(){
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // handleTap(){
        //     console.log("handleTap2="+this.data.clicked)
        //     this.triggerEvent('backDataTap', this.data.checked)
        // },
    }
})

2、custom_button.json

{
    "component": true,
    "usingComponents": {}
}

3、custom_button.wxml

<button class="button" style="height: 90rpx;width:150rpx" hover-start-time="0" hover-class="button-press" > 
    <image style="height: 45rpx;width: 45rpx;" src='{{img}}'></image>
    <text style="color: var(--color2); font-size: 20rpx">{{label}}</text>
</button>

4、custom_button.wxss

.button{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF00;
    padding: 0;
    height: 100%;
    border-radius: 0%
}

/*按下后的样式*/
.button-press{
    padding-top: 10rpx;
}

使用方法：通过设置按下前后的图片，显示不同的效果。

    <view class="toolBar_container">    
        <custom_button label="接收" img="{{isCheckScroll==false ? '/img/checkOff.png' : '/img/checkOn.png'}}" bindtap="checkScroll" />
        <custom_button label="HEX" img="{{isCheckRecHex==false ? '/img/checkOff.png' : '/img/checkOn.png'}}" bindtap="checkRecHex" />
        <custom_button label="清空" img="/img/clear.png" bindtap="btClear" />
        <custom_button label="{{isButtonMore==false ? '更多' : '收起'}}" img="{{isButtonMore==false ? '/img/moreOff.png' : '/img/moreOn.png'}}" bindtap="btMore" />
    </view>