微信小程序

列表渲染

---

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

---

条件渲染

---

wx:if 内如果元素超过两个必须在外层用block
<block wx:if={{post.length}}>  
<view wx:for="{{posts}}"></view>
</block>

<view wx:else>block是一个空标签不渲染成任何标签</view>

---

表单 数据绑定

---

<input type="text" bindinput="inputVal"    value="{{val}}"/>
  data:{
    val:""
  }
 inputVal(event) {
    this.setData({
      val: event.detail.value
    })
  },

---

传递参数

---

传递 item.id  使用 data-xx="{{yy}}"
<button data-id="{{item.id}}"  bind:tap="shan">del</button>

在js内使用
  shan(event) {
    const { id } = event.currentTarget.dataset
    this.setData({
      user: this.data.user.filter(res => res.id != id)
    })
  }

---

导航

---

导航
 <navigator
    url="../../redirect/redirect/
    open-type="switchTab"
    "
  >
    在当前页打开
  </navigator>

  因为有tabbar原因navigator的跳转必须加 open-type 属性，属性值写为switchTab

---

data

---

data 修改只能使用setdata

---

网络

---

  需要备案


请求
onLoad: function(options) {
    方法
    method:"GET",
    传参
    data:{},
    wx.request({
      url: 'https://cnodejs.org/api/v1/topics?limit=5',
      success:res=> {
        this.setData({
          title:res.data.data
        })
      }
    })
  }

跳转
<navigator url="/pages/post/post?id={{item.id}}">{{item.title}}</navigator>

页面内  有条件跳转
wx.switchTab  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch   关闭所有页面，打开到应用内的某个页面
wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack 关闭当前页面，返回上一页面或多级页面。
wx.redirectTo  关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。


options
onLoad: function (options) {
        console.log(options.id);
    wx.request({
      url: `https://cnodejs.org/api/v1/topic/${options.id}`,
      success: res => {
        console.log(res.data.data);
        this.setData({
          title: res.data.data
          
        })
      }
    })
  },

---

下拉刷新

---

首先 增加 "enablePullDownRefresh":true 配置
如果在全局加要在window下

监听用户下拉刷新事件。
onPullDownRefresh: function() {
    
    const { arr } = this.data
    this.setData({
      arr: arr.map(num => num * 2)
    })
    wx.stopPullDownRefresh()
  }

---

上拉触发

---

onReachBottom

---

获取全局globaData

---

const app=getApp()

---