【微信小程序】学习拾遗二（wx:if、wx:for、全局配置、事件导航、下拉与上拉事件）

原创

已于 2022-12-21 16:45:39 修改 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #学习 #前端

于 2022-12-16 22:00:02 首次发布

本文介绍了微信小程序中wx:if的使用，包括其一般用法、配合使用以及与hidden属性的区别。接着讨论了wx:for在列表渲染的应用，并概述了WXSS的特性。此外，还涵盖了全局配置，如tabbar设置和页面配置，以及数据请求的合法域名。文章还详细讲解了导航、下拉事件和上拉刷新数据功能的实现，其中重点提到了上拉事件触发loading动画的条件和注意事项。

wx:if的使用

1、一般代码：

<view wx:if="{
    
    {type === 1}}">西游记</view>
<view wx:elif="{
    
    {type === 2}}">红楼梦</view>
<view wx:else="">三国演义</view>

2、与配合使用

由于是标签，而不是组件，所以不会被渲染，只起到包裹组件的容器功能。

<block wx:if="{
    
    {true}}">
<view>醉里挑灯看剑</view>
<view>只道天凉好个秋</view>
</block>

3. 类似属性hidden

通过设置hidden属性的值，来隐藏或显示组件。
与其他组件一起使用可以达到不同效果。

<view hidden="{
    
    {jianc}}">雄关漫道真如铁</view>
<view hidden="{
    
    {jianc?false:true}}">而今迈步从头越</view>
<button bindtap="gosxj">{
  
  {sxj}}</button>

gosxj(){
   
   
    let jc = this.data.jianc
    if(jc === false){
   
   
      this.setData({
   
   
      sxj:"下一句",
      jianc:true
      })      
    }else