微信小程序：页面间传值

最新推荐文章于 2024-09-14 14:14:02 发布

Wendimoor.Y

最新推荐文章于 2024-09-14 14:14:02 发布

阅读量160

点赞数

文章标签：小程序 js

本文链接：https://blog.csdn.net/zzsgxsz/article/details/103717314

版权

微信小程序：页面间传值

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/cutting_ic_arrow@2x.png "  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>