微信小程序學習-頁面跳轉與數據綁定

頁面跳轉

頁面跳轉分tabber頁跳轉和非tabber頁跳轉

非tabber頁跳轉：

1.使用標簽

<navigator url="/pages/redirect/redirect?id=666">通過標簽跳轉到新頁面</navigator>

傳遞參數id=666

redirect：

Page({
/**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options.id);
  }
})

設置預覽當前頁面：

添加編譯模式

 

 

 

 修改啟動頁面，預覽

 

 

 

 

 

 

2.綁定事件

<view><text class="c1" bindtap="clickMe" data-nid="123">點我跳轉</text></view>

使用data-變量名形式傳遞參數nid=123

js：

Page({
  ...
  /**
   *  點擊綁定的事件
  */
   clickMe:function(e){
    console.log('點我了');
    console.log(e);
    /*得到參數nid*/
    var nid = e.currentTarget.dataset.nid;
    console.log(nid);
    //跳轉(非tabbar頁面)
    wx.navigateTo({
      url: '/pages/redirect/redirect?id='+nid,
    })
  }
})

 

   

 

 

 

tabber頁跳轉：

  <view class="to-index-btn" bindtap="toIndexPage" wx:if="{{ !list.length }}">
        去逛逛
    </view>

js：

toIndexPage: function () {
        wx.switchTab({
            url: "/pages/category/category"
        });
    },

 

數據綁定

1.基本顯示

wxml

<text>數據綁定</text>
<view>消息 : {{message}}</view>

js

// pages/bind/bind.js
Page({

 /**
   * 頁面的初始數據
   */
  data: {
    message:'hello world',
    
  }
  
)}

 

 

 

2.數據更新

<text>數據綁定</text>
<view>消息 : {{message}}</view>
<view>回復 : {{content}}</view>
<button class="to-btn" bindtap="reply">回復消息</button>

js

 reply:function(e){
    //獲取data
    console.log(this.data.message);
    //設置和修改data
    this.setData({ content: 'My name is xiaoming',
                    message:'I replay',})
  },