评论

微信开发工具中简单的条件函数以及循环函数

微信开发者工具中简单的条件判断和循环函数

今天学习了在js中简单的条件函数以及循环函数。

继续以上次的首页开发为模板,将所有最小单位的盒子删除剩下一个,再对其属性再.js中进行编辑。例如,在.js中data中进行对象设计,name:'EDG对战DK精彩集锦',同时在.wxml中原文本相应位置改为相应的对象属性,例如<view>{{name}}</view>,,就可以将相应的对象属性展现在相应的位置上。源代码中对一个对象的设置如图:

除此之外,小程序都是源自于生活,那么为了贴合生活市场实际,必定不是每个视频都是免费播放的,类似于比较精彩流量较多的视频一定要拥有会员才可以播放,那么如何判断哪些视频需要会员,哪些视频是免费播放就显得不可或缺。这里就要用到我们的条件判断语句,对对象中的相应属性进行判断,进而改变文本显示的内容以区别“会员播放”和“免费播放”。以上图为例,对对象中的属性price进行判断,若price>0,则该视频为"会员播放",反之则为“免费播放”。条件判断语句的具体语法主要在相应需要判断的地方,比如这里是文本内容需要判断,则在<view>中添加条件判断,即<view wx:if="{{price>0}}">。源代码中条件判断如图:

进行完条件判断,那么接下来就要增添我们的子盒子,这里不再和第一次一样进行复制粘贴,而是利用循环语句。由于具有多个对象,那么我们应该运用数组类型进行编辑.js,这样一个数组里就已经包含了多个对象,只要遍历这个数组就能增添我们模块的数量。实际代码如图:

.js部分:

(省略号中都是对象属性的设置)

.wxml部分:

由于循环函数默认赋值给item,所以我们需要在每个对象属性加前缀item.,当然我们也可以进行更改,相应的语法为wx:for-item="xxx",在图中我把item改为video方便自己理解和记忆,所以我在每个对象属性前加的前缀为video.。

实际运行结果图:

以上就是我今天的学习心得,希望对大家有帮助。学小程序真是一天为数不多的放松。


最后一次编辑于  2021-11-08  
点赞 1
收藏
评论
登录 后发表内容