• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

页面跳转

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

  

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap