您的当前位置:首页在uni里面怎么修改checkbox的样式
在uni里面怎么修改checkbox的样式
来源:锐游网
很多小伙伴都很苦恼 修改不了checkbox的样式
那我们该怎么做呢?
哈哈哈哈想不到吧 你以为我是checkbox 其实我是 view哒!
<!-- checkbox -->
<view class="iconfont checkicon" @click="checkedClick(item.id)" :class="item.checked ? 'icon-xuanzhong' :'icon-weixuan'"></view>
<view class="cart_item" v-for="item in cart" :key="item.id">
<!-- checkbox -->
<view class="iconfont checkicon" @click="checkedClick(item.id)" :class="item.checked ? 'icon-xuanzhong' :'icon-weixuan'"></view>
<!-- img -->
<image src="../../static/logo.png" mode="widthFix"/>
<!-- text -->
<view class="cart_text">
<text class="d-b c_txt">{{item.title}}</text>
<text class="d-b c_sp">{{spe}}</text>
<text class="d-b c_unp">¥{{item.price}}</text>
</view>
<!-- 加减 -->
<view class="clac">
<image class="f-l" src="../../static/icon/add.png" @click="addCartCount(item.id)" mode="widthFix"/>
<view class="f-l">
{{item.count}}
</view>
<image class="f-r" src="../../static/icon/rem.png" @click="removeCartCount(item.id)" mode="widthFix"/>
</view>
<!-- 删除 -->
<uni-icons class="cart_remove f-c" type="trash" size="15" @click="del(item.id)"></uni-icons>
</view>
这是所有的 html 是循环的
是用vuex写的
我们点开iconfont
复制这个网址 打开 得到这个
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1843890_hc5xpr4o7hl.eot?t=1590484741403'); /* IE9 */
src: url('//at.alicdn.com/t/font_1843890_hc5xpr4o7hl.eot?t=1590484741403#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAAsAAAAABtAAAAKJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBOIEyATYCJAMMCwgABCAFhG0HPRv3BRHVkyVkfyvuWBH455Q4hAyqhkbcfa6Q7+d08h9aebbMwIYRkFXy+x3x8Pzat3PfuzMropgkiWZ100+ESNqEatIUSGRC8oRHsZCnAXaZ8yXIQH21LJrb6Ayam80iXx+Iy8FYN5X+ZZoRdT005i/ZVxO0zOxKg4P5zbnqBkZFvRzJt+hZF1IYZZdlTwHwx73TP8//ZdF8IOWy5rDFYwImGNBYmyIrkNBzAt66jOMEBq3aL04XMvola1wgLmBCfy4kpZDtF9qapSmeaPSXRyXF4/D78VcdiH6KprKmbnTfcPy5H1m92d103keECVjdoGI/kujVpjZQhUCrBrnTdqQM/KjrWIxF7JVeiL/OyR0Gu5Eu/OCq3JoYLyigghaJveiBzCuKMtwOD1/53PU+1n/NF2sqHClSPLOCCn61/S8iI4qsLhO6+Yl1+ck2AE+WbrH3A62DuhvbrmtAfQQyFI08fzmfkMsLIGOj8Dd/Y3M8h+8fSvD5JhzR3UzqTfSfzx38O3HPhtSllrmmKnJFpqeaH+koQCB6dSzfpO/jNTO9E4T+nFiAos8KVP22o0nuh8aQQ9DqdwwG7XNu9ZApm6giB7DXPYIw7gUUo15BNe41muQ3aMz6D63xqDCoZ6a2HGLuQnlg1IIOzA+Spdk7Vimj/CuGbdSclYaMJ/KaotBWTTF7wRl5jhnrO3QiHjzTBGc6DceRYGHq0UoVRZZ9Xfu6N1WWJlU6MGpBB8wPJEuz99tLWfr8FcM2am4pqfE+kdfUOWhVmh7oRTX3KrmXV9Z36Ih44JkmcCYHjnaKwFI/qEcrlTgisezVTCvfV1Wtr5k+oFCowNqzKFEjFRc3Pf8jzSH7YMoYlQIAAAA=') format('woff2'),
url('//at.alicdn.com/t/font_1843890_hc5xpr4o7hl.woff?t=1590484741403') format('woff'),
url('//at.alicdn.com/t/font_1843890_hc5xpr4o7hl.ttf?t=1590484741403') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1843890_hc5xpr4o7hl.svg?t=1590484741403#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-xuanzhong:before {
content: "\e606";
}
.icon-weixuan:before {
content: "\e607";
}
加到css里面就行了
在vuex里定义的 ischecked 是否等于 true 如果等于则加 选中 icon 不等于则加 不选中icon
因篇幅问题不能全部显示,请点此查看更多更全内容