微信小程序之条件判断
前文:
今天踩了一下午的坑,但是确实很简单的问题。
我说一下需求:扫描商品的二维码,从而判断,同一个二维码不可多次扫描;

点击扫一扫 会在灰色区域展示 扫描的商品信息,比如商品名称,商品码等,但是我们的需求是一物一码,即使是同一个商品也是不同的商品码。
错误示例:
最开始我的想法是做判断,因为我会在相对应的js文件中定义一个 productList:[ ],数组来存放数据,
Pages({
productList: [用来存放,通过后台接口得到的相关商品的数据信息]
})
由于我们是一物一码,那唯一的判断条件就是商品码了
wzy.post("/wx/open/getProdcutNameByCode", product, true)
.then((res) => {
let products={
name: res.data.data,
code:product.code,
}
let productLength = this.data.productIist.length;
//如果列表没有直接推,如果有循环,如果
if (productLength==0){
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}else{
for (let i = 0; i < productLength;i++){
if (products.code == this.data.productIist[i].code){
global.jv.showPop('提示','同一商品不可重复扫描')
return
}
}
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}
}).catch((res) => {
console.log(res)
wzy.showPop('提示', '当前网络繁忙,请重新扫描')
})
},
原来的思路是:
.then((res) => {
let products={
name: res.data.data,
code:product.code,
}
let productLength = this.data.productIist.length;
//如果列表没有直接推,如果有循环,如果
if (productLength==0){
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}else{
// 原来思路:把数组中的每一项code取出来与扫码得到的code进行对比,如果不相等就push到数组中 从而在页面循环,但是发现
// 当数组的length>1的情况下,会发生即使你扫码得到的code不与原数组相同但是会重复多次,次数由productIist.length决定
productIist.forEach(item=>{
if(item.code !==this.data.productIist.code ) {
this.data.productIist.push(products);
this.setData({
productIist: this.data.productIist
})
}
})
}).catch((res) => {
console.log(res)
wzy.showPop('提示', '当前网络繁忙,请重新扫描')
})
},
所以 在上面的正确的示例中 使用for循环 并把判断也写进for循环中 如果数组中的code与扫描的code相等 就会弹出提示框,并且不会执行下面代码,但是当条件不相符的时候,便可以愉快的执行下面的代码了。
文中的wzy封装的方法
微信小程序之条件判断的更多相关文章
- 微信小程序-视图条件渲染
条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...
- 微信小程序:如何判断数组中的条数?
可以<view wx:if="{{list.length == 0}}"> </view> 可以在 {{}} 内进行简单的运算,包括三元运算符.逻辑判断.算 ...
- 微信小程序:条件渲染wx:if和hidden
一.条件渲染:wx:if,wx:elif,wx:else 花括号中的true或false可以改成变量从而来动态显示. 二.hidden 只显示hidden2 当标签不是频繁切换显示(控制是否渲染到页面 ...
- 微信小程序-if条件渲染
#index.wxml <view>今天吃啥</view> <view wx:if="{{condition==1}}"> 饺子 </vi ...
- 微信小程序的页面渲染(if/for)
下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家 条件渲染 <!--wxml--> <vi ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序与vueJs的异同
简而言之,所有的框架都是建立在原生javascript基础之上的,所以对于有一定js基础的同学来说,各种框架都是比较容易入手的,但不同的框架之间又有一定的差别,有时候切换使用时就会掉入坑了. 一.微信 ...
- 如何开发微信小程序学习
文件中 project.config.json是开发者工具为我们自动生成的一个开发者工具的配置文件,主要是保存了一些我们对开发者工具的个性化配置. 一个微信小程序应用至少要有两个文件 一个是app.j ...
- 小程序开发运营必看:微信小程序平台运营规范
一.原则及相关说明 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. 微信团队一 ...
随机推荐
- JAVA语言程序设计课后习题----第五单元解析(仅供参考)
1 本题是水题,题目要求你求最大值.最小值,建议你用Arrays.sort函数进行排序,最大值.最小值就可以确定了 import java.util.Arrays; import java.util. ...
- 解决myeclipse没有代码提示的问题
今天和室友安装了一样的myeclipse版本,结果室友的自动提示功能有,我的输入“.”后却不能提示,这对我们敲代码简直来说是一个折磨,不能自动提示,本来还以为是系统问题,一个是win7,一个是win1 ...
- three.js之让物体动起来方式(二)移动物体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- altium designer 鼠线
第一: 按“L”进入View Configurations 要确保Default Color for New Nets是勾上的. 第二: 如果“PCB”的下拉列表处于“From-To Editor”状 ...
- Nginx的入门
Nginx 入门 一.正向代理和反向代理 1.正向代理 正向代理(forward proxy) ,一个位于客户端和原始服务器之间的服务器,为了从原始服务器取得内容,客户端向代理发送一个请求并制定目标( ...
- sql like 拼接字符串模糊查询
这种分割的值大家常用,如果要用like 来查询包含2,这个值的数据有哪些,这个怎么查? like '%2%' ????,这是不行的如果是 44,125,687 同样可以查出来,那么就想到通配符, l ...
- maven的配置和eclipse maven插件安装
1.下载maven:http://maven.apache.org/download.cgi 2. 配置环境变量: 3. 修改maven文件夹下bin/conf/settings.xml:maven仓 ...
- usb发送字节
- guava的一些用法
package guavaTest; import com.google.common.base.CharMatcher; import com.google.common.base.Joiner; ...
- Web前端开发——概述
前端技术构成: 结构:html,从语义的角度,描述页面结构 样式:css,从审美的角度,美化界面样式 行为:JavaScript,从交互的角度,提升用户体验 前端技术标准: 前端技术的标准就是由W3C ...