阅读 32

微信小程序学习-页面跳转与数据绑定

页面跳转

页面跳转分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‘,})
  },

  

 

原文:https://www.cnblogs.com/xiao-apple36/p/12792558.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐