(check.png)(checkbox.png)(checkDisable.png)

以上三张图是我的可选择状态,已选中,以及不可选择等三种;接下来来写几种使用情景;具体样式我不再细写了,只说逻辑,需要说明image需要放在你所选择的循环里,比如如下,仅做展示,样式可以根据需要写

1:只支持单选,并且都可以选择

 <image v-if="orderarr.length!=0" @click="toCheck(item.id)" class="check" :src="orderarr.includes(item.id)?'/static/img/check.png':'/static/img/checkbox.png'"></image>     这里是表示,已选中是选中状态,未选中则是可选择状态<image v-else @click="toCheck(item.id)" class="check" src="/static/img/checkbox.png"></image>      这里是表示当前需要选择的内容全部可选

其中的orderarr是你所选中的id数组,includes方法是判断当前数组是否包含当前循环的id

check方法

    toCheck(id){if(this.orderarr.length==0){//判断当前id数组是否为空,若是为空,则直接pushthis.orderarr.push(id)}else{            this.orderarr=[]//由于当前逻辑是单选,直接清空再push就好了            this.orderarr.push(id)           }           console.log(this.orderarr); },

2:支持多选,并且所有选项均可选择

        toCheck(id){if(this.orderarr.length==0){//判断当前id数组是否为空,若是为空,则直接pushthis.orderarr.push(id)}else{if(this.orderarr.includes(id)){//判断当前点击的选项是否已经被选择了this.orderarr.forEach((val,index) => {if(val==id){//若被选择,则清除调当前选项this.orderarr.splice(index,1); }});} else{this.orderarr.push(id)//若没有被选择,则直接push}}console.log(this.orderarr);},

3:支持多选,并且,当某选项只可单选时,其他选项禁止点击;

 <view v-show="isSuperpose"> 当前为已选中状态,其中其他选项不可点击<image v-if="couponArr.length!=0" @click="toCheck(c)" class="check" :src="couponArr.includes(c.id)?'/static/img/check.png':'/static/img/checkDisable.png'"></image><image v-else @click="toCheck(c)"  class="check" src="/static/img/checkbox.png"></image>
</view>
<view v-show="!isSuperpose">  当前为已选中状态,其中其他选项可以点击选择<image v-if="couponArr.length!=0" @click="toCheck(c)" class="check" :src="couponArr.includes(c.id)?'/static/img/check.png':'/static/img/checkbox.png'"></image><image v-else @click="toCheck(c)" class="check" src="/static/img/checkbox.png"></image>
</view>

  toCheck方法

 toCheck(item){console.log(item.superpose);if(this.isSuperpose){//如果当前除已选中状态外,其他选项不可点击if(this.couponArr.includes(item.id)){//判断当前点击的是否已经被选择,若当前选项已被选择,则当前点击操作是取消选中,并可以选择其他选项this.couponArr.forEach((val,index) => {if(val==item.id){this.couponArr.splice(index,1); }});this.isSuperpose=false} else{              //因为其与选项不可点击,所以不作操作}}else{if(item.superpose==1){//我们是在接口中返回是当前选择项是否可多选,当值为1时,不可多选if(this.couponArr.length==0){this.couponArr.push(item.id)//未选中时,直接push}else{console.log(this.couponArr);//若有已选中选项,但由于当前项只可单选,则直接清空couponArr,在pushthis.couponArr=[]this.couponArr.push(item.id)}         this.isSuperpose=true//并将状态修改成其他选项不可选择}else{//若当前选择项可以多选if(this.couponArr.length==0){this.couponArr.push(item.id)//未选中时,直接push}else{剩下多选的逻辑则同上if(this.couponArr.includes(item.id)){this.couponArr.forEach((val,index) => {if(val==item.id){;this.couponArr.splice(index,1); }});} else{this.couponArr.push(item.id)}}     this.isSuperpose=false}}},

uni-app中使用选择框图片来写单选,多选,以及不可选择相关推荐

  1. uni app中使用图表

    关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...

  2. vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);

    1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交; 前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量 ...

  3. Android uni app 列表底部白条解决方案

    uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...

  4. vue插槽solt ,uni.app

    一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...

  5. uni 在app中引入h5页面(uni编写)

    关于在app中引入网页,使用的webview标签 相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...

  6. uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱

    一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...

  7. 切换 uniapp_万能前端框架uni app初探03:底部导航开发

    前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

  8. uniapp 微信小程序地图,在高德app、腾讯app、百度app、苹果地图app 中打开

    一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...

  9. uni app 开发微信小程序及上线体验

    uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...

最新文章

  1. 当心在Lib中定义非const全局变量
  2. 针对Mysql数据库服务器的优化
  3. 米斯特白帽培训讲义 漏洞篇 越权
  4. User breakpoint called from code at 0x771064f4
  5. Object Detection︱RCNN、faster-RCNN框架的浅读与延伸内容笔记
  6. 最长递增子序列和双序列
  7. java后端AppV3版本微信支付CV大法2021-11-12
  8. Coverity 代码静态安全扫描工具 : 认识Coverity
  9. python 微信开发库_WeRoBot 是一个微信公众号开发框架
  10. NOI题库练习1.4(08)
  11. 自己DIY word2010脚注和尾注没有的格式
  12. C 进阶内存四区(3)
  13. 21天战拖记——Day8:猴子法则and继续复习!(2014-05-11)
  14. robot—如何调用上传文件的接口,表单传值
  15. 雷锋工厂模式(笔记)
  16. 将正确的ADC与应用程序匹配
  17. qq2013聊天记录在哪个文件夹?QQ2013聊天记录存放位置
  18. 使用js-export-excel插件实现前端导出excel表格
  19. 河南分销小程序开发|分销系统开发流程介绍
  20. 华为AI计算机,华为在人工智能行业的发展

热门文章

  1. oracle 如何创建、删除用户并授予权限
  2. 堃博医疗创上市以来新低:年内跌幅超八成,市值累计蒸发90亿港元
  3. 企业仓库管理的5种方法
  4. 为要混一口饭吃(乱改徐志摩为要寻一个明星)
  5. 马扎克 MAZAK CNC数据采集smart、smooth(smooth-c、smooth-g、smooth-x)、matrix(nexu、nexu2)以及640(640m、640mn、640t)系列
  6. 【DTCC 2016】专家访谈:盖国强谈 DT 时代商业行为变化
  7. 计算机在现代工作中的应用,计算机在现代化猪场管理中的应用
  8. GISer入门指南 第二季(PPTX)
  9. ntp如何确认与服务器偏差_怎么测试linux下搭建的ntp服务器
  10. libvirt 介绍