在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