欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序:页面间传值

程序员文章站 2024-02-15 09:36:16
...

微信小程序:页面间传值

index 页面向 rule 页面传递 name 和 des 的值

一、index 页面 :

index.js:
const App = getApp();
Page({    /* 页面的初始数据 */
  data: {
    name:'',
    des:''
  },
  
  onLoad: function (options) {
    this.rideCardLog();
  },
  
  cardRule: function (e) {
    var that = this;
    App._post_form('/post', {
      module: 'UserService.rideCardLog',
    }, function (result) {
      if (result.state === "000") {
        that.setData({
          name: result.data[0].name,
          des: result.data[0].des
        })
        console.log(result.data[0].name);
        wx.hideLoading();
      } else {
        wx.hideLoading();
        App.showMsg(result.msg);
        return false;
      }
    });
    wx.navigateTo({
      url: '../ridingCard/rule?name=' + e.currentTarget.dataset.name + '&des=' + e.currentTarget.dataset.des,
    })
  }
index.wxml:
<view bindtap="cardRule"  data-name="{{item.name}}"  data-des="{{item.des}}" class="card_info f-24 col-50 dis-flex flex-dir-row flex-x-between flex-y-center">
	<view>
    	<text>有效期至 {{ item.outtime }}</text>
 	</view>
 	<view class="dis-flex flex-dir-row flex-x-between flex-y-center col-50" >
    	<text class="pr-8 f-24 " >查看规则</text>
    	<image src="../../images/aaa@qq.com "  style="width:24rpx;height:24rpx;"></image>
  	</view>
</view>
页面效果:

点击查看规则,跳转到rule页面,并显示 name 和 des 的值。
微信小程序:页面间传值
微信小程序:页面间传值

二、rule 页面 :

rule.js:
const App = getApp();
Page({
  data: {
    name: '',
    des: ''
  },
  
  onLoad: function (options) {
    this.setData({
      name:options.name,
      des:options.des
    })
    console.log(this.data.name)
  }
rule.wxml:
<view class="rule_container bgc-ff ">
  <view class="f-w f-32 col-25 p-b-40">{{ name }}</view>
  <view class="rule_text pt-5 f-28 col-25">
    <text>{{ des }}</text>
  </view>
</view>
页面效果:

传值成功!耶!!!
微信小程序:页面间传值

相关标签: 小程序 js