uni-app中使用选择框图片来写单选,多选,以及不可选择
(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中使用选择框图片来写单选,多选,以及不可选择相关推荐
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交; 前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量 ...
- Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
- vue插槽solt ,uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
- uni 在app中引入h5页面(uni编写)
关于在app中引入网页,使用的webview标签 相对于uniapp 官网给出的webview使用方法在这里https://uniapp.dcloud.io/component/web-view 但是 ...
- uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下 最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图 二.解决方法 1.让其在输入框获取焦点时隐藏 百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
- 切换 uniapp_万能前端框架uni app初探03:底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- uniapp 微信小程序地图,在高德app、腾讯app、百度app、苹果地图app 中打开
一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...
- uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
最新文章
- 当心在Lib中定义非const全局变量
- 针对Mysql数据库服务器的优化
- 米斯特白帽培训讲义 漏洞篇 越权
- User breakpoint called from code at 0x771064f4
- Object Detection︱RCNN、faster-RCNN框架的浅读与延伸内容笔记
- 最长递增子序列和双序列
- java后端AppV3版本微信支付CV大法2021-11-12
- Coverity 代码静态安全扫描工具 : 认识Coverity
- python 微信开发库_WeRoBot 是一个微信公众号开发框架
- NOI题库练习1.4(08)
- 自己DIY word2010脚注和尾注没有的格式
- C 进阶内存四区(3)
- 21天战拖记——Day8:猴子法则and继续复习!(2014-05-11)
- robot—如何调用上传文件的接口,表单传值
- 雷锋工厂模式(笔记)
- 将正确的ADC与应用程序匹配
- qq2013聊天记录在哪个文件夹?QQ2013聊天记录存放位置
- 使用js-export-excel插件实现前端导出excel表格
- 河南分销小程序开发|分销系统开发流程介绍
- 华为AI计算机,华为在人工智能行业的发展
热门文章
- oracle 如何创建、删除用户并授予权限
- 堃博医疗创上市以来新低:年内跌幅超八成,市值累计蒸发90亿港元
- 企业仓库管理的5种方法
- 为要混一口饭吃(乱改徐志摩为要寻一个明星)
- 马扎克 MAZAK CNC数据采集smart、smooth(smooth-c、smooth-g、smooth-x)、matrix(nexu、nexu2)以及640(640m、640mn、640t)系列
- 【DTCC 2016】专家访谈:盖国强谈 DT 时代商业行为变化
- 计算机在现代工作中的应用,计算机在现代化猪场管理中的应用
- GISer入门指南 第二季(PPTX)
- ntp如何确认与服务器偏差_怎么测试linux下搭建的ntp服务器
- libvirt 介绍