wx:if 与 hidden 都得以调整Wechat小程序兰秋素的显得与否。

功用近似一条录像的小程序,就是摄像列表,然后每一种录制上覆盖一张录制的封面图,点击封面图的播音按键摄像播放,点击别的录像的时候,停播当下摄像,播放点击的录像。大约是那般:

原创小说,迎接转发。转发请注脚:转发自IT人遗闻会,感激!最先的文章链接地址:「小程序JAVA实战」小程序视图之规范判定

小程序里面也是有原则决断的,小编深信大家在开拓java if和jstl c:if
c:when。有一些人说在技士眼里唯有if
else,可知首要性。一同掌握下Wechat小程序额的尺码剖断吧。源码:
中的No.8

  • wx:if 是遇 true 显示。
  • hidden 是遇 false 显示。
       {{item.title}} {{item.description}}     {{!item.upStatus?'展开':'收起'}}   

videoPlay{ var index = video.getDataSet; if (!this.data.videoIndex) { // 没有播放时播放视频 this.setData({ videoIndex: index }) var videoContext = wx.createVideoContext videoContext.play() } else { var videoContextPrev = wx.createVideoContext('video' + this.data.videoIndex) videoContextPrev.stop() this.setData({ videoIndex: index }) var videoContextCurrent = wx.createVideoContext videoContextCurrent.play() }},

小程序的尺度决断

  1. <view wx:if={{condition}}>
  2. <block wx:if={{condition}}>
  3. 法定的论述

www.qy186.com 1

  1. 示范条件判定

因为 wx:if 之中的模板也也许包括数据绑定,所以当 wx:if
的尺度值切换时,框架有一个部分渲染的进程,因为它会确认保障条件块在切换时销毁或重复渲染。同不时间wx:if 也是惰性的,假诺在始发渲染条件为
false,框架什么也不做,在条件第叁回成为真的时候才起来有个别渲染。比较之下,hidden
就大概的多,组件始终会被渲染,只是简短的主宰展现与潜伏。平时的话,wx:if
有越来越高的切换消耗而 hidden
有更加高的始发渲染消耗。由此,若是须求频仍切换的风貌下,用 hidden
更加好,如若在运维时规格超级小或然退换则 wx:if 较好。

ifElse.wxml

<!ifElse.wxml--><view > <view wx:if="{{age<18}}">未成年</view> <view wx:elif="{{age>=18 &&age<=30}}">已成年</view> <view wx:elif="{{age>30 &&age<=50}}">壮年,一起关注公众号:编程坑太多给我来点赞</view> <view wx:else>已经老了</view> <block wx:if="{{false}}"> <view>这是一个块级元素</view> <view>本节是if判断学习</view> </block> <view hidden='{{true}}'> <view>这是一个hidden元素</view> <view>hidden判断学习</view> </view></view>

ifElse.js

//ifElse.js//获取应用实例const app = getApp()Page({ data: { age: 34 }})

www.qy186.com 2

hidden true很像大家css里面包车型的士display:none
成分是意气风发对,只是显示屏不展现wx:if
就象是大家开采的java的jstl标签里面包车型客车if,直接因素就未有

PS:条件渲染也是很要紧的,业务逻辑剖断全靠它了。

www.qy186.com 3

她们还会有风流倜傥层细微的分别:

在页面布局上,大家让摄像的封面图定位在录像的器皿中,将播放按键定位到录像容器中,且层级最高。因为需借使点击封面图上的播放按键录制开始播放,所以将show-center-play-btn设置为flase。在循环绑定数据时,将循环的index拼成录制的ID,将循环的index作为品质绑定到播放按键。

  • wx:if 在隐蔽的时候不渲染。
  • hidden 在掩盖时依然渲染,只是不展现。

在JS中,首先我们设置videoIndex来表示前段时间播发的录制在列表中的地点,它的初叶值为null。

所以假若频仍切换的话,用 wx:if 将会花销越来越多能源,因为老是显示的时候她都会渲染,每一回蒙蔽的时候,他都会销毁。

摄像的播放与暂停

只要切换并不频仍的话,用
wx:if 相对来讲较好些,因为它会防止早先就一下子渲染那么多。

当点击事件产生时,首先获得点击的index,然后推断videoIndex的值:

总结:

生龙活虎经videoIndex值为null,则代表那是率先次点击,将index绑定到videoIndex上,然后经过var
videoContext =
wx.createVideoContext来获取当前点击的录像,并利用videoContext.play(State of Qatar将录制进行播放。
即便videoIndex的值不为null,则象征那不是第3回点击,咱们首先应该将正在播放的摄像甘休,然后在播音点击的录制。当时,videoIndex的值表示正在播放的录像在列表中的地点,大家由此var
videoContextPrev = wx.createVideoContext(‘video’ +
this.data.videoIndexState of Qatar来获取正在播放的摄像上下文,然后经过videoContextPrev.stop(State of Qatar把它截止。最终我们将获得到的index值重新绑定到videoIndex上意味着点击录制的序号,然后重新步骤大器晚成。

  • 数次切换:用 hidden。
  • 突发性切换:用 wx:if。

封面图管理

偶尔为了利用效果与利益,大家也不要管地点的国有国法,举例:

笔者们早就给封面图和封面图上的播放开关进行管理了,用Wechat的wx:if或许hidden就足以了,当videoIndex等于index的时候,表示要播放这么些摄像,将录像体现并播放,封面图和播放按键隐敝就可以了。

当下有一个 video 控件,autoplay=”true”。

好几小坑

  • 假定我们用
    hidden 来掩藏,然后再展现,大家会发现:遮盖时期摄像已经在播报了,显示时反而会暂停止播放放。
  • 假使大家用 wx:if
    来隐瞒,然后再展现,大家会发掘:隐瞒时期摄像并从未广播,展现时会立即播放。再遮掩,录制又停播。再突显,录像又起来播放。

一起首思量到品质,由于wx:if在页面加载的时候并不渲染数据,频繁点击的话频仍渲染数据,有一些影响属性,就应用了hidden方法,使用hidden方法管理封面图和播放按键一点标题也未有,管理录像的话不经常候会产出摄像不播放,並且出示中间播放开关的图景,所以选用了wx:if,那样页面开端渲染的时候不渲染录制,点击之后渲染录像,并且安装录制自动播放,就能够啊~~~

以上正是本文的全体内容,希望对大家的读书抱有利于,也希望大家多都赐教脚本之家。

相关文章