lok_006 2021-10-14 11:42 采纳率: 94.4%
浏览 56
已结题

小程序如何实现复选框选中显示对应图片

运用同一个JS动作,如何显示不同图片
js:

Page({
onTap(){
this.setData({showPic: !this.data.showPic});
}
})

xml:


<view>亲肤面料材质</view>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap" id="">{{showPic?'冰丝透心凉':"冰丝透心凉"}}</checkbox>          
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'百分百纯棉面料':"百分百纯棉面料"}}</checkbox>         
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test3':"test3"}}</checkbox>   
    </label>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test4':"test4"}}</checkbox>   
    </label>
</checkbox-group>
<checkbox-group>
    <label>
        <checkbox type="primary" bindtap="onTap">{{showPic?'test5':"test5"}}</checkbox>   
    </label>
</checkbox-group>
<image hidden="{{!showPic}}" src="http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSHKDRfaSicL030ccVPccfic6cickPEq9A8LmchHibmBeBuDYJEXtyPr3rYAAmVPuoicksxTBTDTvgAQgKw/0?wx_fmt=jpeg"></image>
<image hidden="{{!showPic}}" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ce6b5b56c3fda8012036be333fed.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636689154&t=068da9220842c93e009a90825cb71303"></image>

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-10-14 11:52
    关注

    data增加状态数组indexs,wxml改这样,新增data-index属性,然后image的hidden通过判断indexs状态值来显示隐藏
    有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~

    img

    <view>亲肤面料材质</view>
    <checkbox-group>
        <label>
            <checkbox type="primary" bindtap="onTap" id="" data-index="0">{{showPic?'冰丝透心凉':"冰丝透心凉"}}</checkbox>          
        </label>
        <label>
            <checkbox type="primary" bindtap="onTap" data-index="1">{{showPic?'百分百纯棉面料':"百分百纯棉面料"}}</checkbox>         
        </label>
        <label>
            <checkbox type="primary" bindtap="onTap" data-index="2">{{showPic?'test3':"test3"}}</checkbox>   
        </label>
        <label>
            <checkbox type="primary" bindtap="onTap" data-index="3">{{showPic?'test4':"test4"}}</checkbox>   
        </label>
    </checkbox-group>
    <checkbox-group>
        <label>
            <checkbox type="primary" bindtap="onTap" data-index="4">{{showPic?'test5':"test5"}}</checkbox>   
        </label>
    </checkbox-group>
    <image hidden="{{!indexs[0]}}" src="http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSHKDRfaSicL030ccVPccfic6cickPEq9A8LmchHibmBeBuDYJEXtyPr3rYAAmVPuoicksxTBTDTvgAQgKw/0?wx_fmt=jpeg"></image>
    <image hidden="{{!indexs[1]}}" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ce6b5b56c3fda8012036be333fed.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636689154&t=068da9220842c93e009a90825cb71303"></image>
     
    

    js

    Page({
      data:{indexs:[]},//显示状态数组
      onTap(e){
        var index=e.currentTarget.dataset.index;
        var indexs=this.data.indexs;
        indexs[index]=indexs[index]?0:1;//取反
        this.setData({indexs: indexs});//
      }
      })
       
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月22日
  • 已采纳回答 10月14日
  • 创建了问题 10月14日

悬赏问题

  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题
  • ¥15 需要写计算过程,不要写代码,求解答,数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil,写代码解决两个问题,用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥15 vba使用jmail发送邮件正文里面怎么加图片
  • ¥15 vb6.0如何向数据库中添加自动生成的字段数据。