微信小程序页面传参实现列表中item点击跳转并传参到编辑页面

Posted 2021-12-08 李猫er

写在前面

常见的需求操作：在一些页面中，我们一般会对后台请求的数据列表中的每项item进行CRUD 操作，点击对应的itme，跳转到编辑页面，并显示相应的数据，这涉及到一个很常见的操作：页面传参。下面演练实现一下上面的场景需求：

发送数据端==> 列表页面：list.wxml:

在控件中，通过自定义属性data-xxx设置要发送的数据，其中data-是固定格式，xxx为你自定义的属性名，属性名必须全部小写，=后面是你要携带的数据值value。
list.js
在触发的事件中，通过e.currentTarget.dataset.xxx 捕获发送的数据值，在wx.navigateTo方法中，以&name(参数名) + name(值) 拼接发送过去；

点击button触发携带发送的数据

接收数据端==> 编辑页面：edit.wxml
接受的页面，用value='{{value}}'绑定接收的值

在edit.js中onLoad中加载获取传过来的值：edit.js

在onLoad中打印接收的数据：

核心代码

list.wxml:

		<view class="meeting-list" >
		<scroll-view scroll-y="true" style="height:auto;" bindscrolltoupper="upper" bindscrolltolower="lower"
			bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
			<view class="meeting-list-item" wx:for="{{meetingList}}" wx:key="id" >
				<view class="item-title">
					<text class="item-title-id">{{item.id}}</text>
					<text class="item-title-name">{{item.name}}</text>
					<text class="item-title-state">{{ item.status == 1 ? '未开始' : '已结束' }}</text>
					<image class="item-img" src="../../assets/images/up_icon.png"></image>
				</view>
				<view class="content">
					<view class="item-content">
						<text class="item-content-title">名称</text>
						<text class="item-content-detail">{{item.name}}</text>
					</view>
					<view class="item-content">
						<text class="item-content-title">时间</text>
						<text class="item-content-detail">{{item.time}}</text>
					</view>
					<view class="item-content">
						<text class="item-content-title">开始时间</text>
						<text class="item-content-detail">{{item.beginTime}}</text>
					</view>
					<view class="item-content">
						<text class="item-content-title">结束时间</text>
						<text class="item-content-detail">{{item.endTime}}</text>
					</view>
					<view class="item-content">
						<text class="item-content-title">最大容纳人数</text>
						<text class="item-content-detail">{{item.max}}</text>
					</view>
					<view class="item-content">
						<text class="item-content-title">操作</text>
						<view class="item-handle">
							<view class="handle-delete" bindtap="deleteMeeting" data-id='{{item.id}}' data-name='{{item.name}}' data-index='{{index}}'>
								删除
                <image bindtap="deleteMeeting" class="handle-img" src="../../assets/images/delete_icon.png" />
              </view>
						  <view class="handle-update" bindtap="goEdit" 
								data-id='{{item.id}}'
								data-name='{{item.name}}'
								data-time='{{item.time}}'
								data-begintime='{{item.beginTime}}'
								data-endtime='{{item.endTime}}'
								data-max='{{item.max}}'>
							  编辑
								<image class="handle-img" src="../../assets/images/ok_icon.png" style="margin-left:15rpx;" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

list.js:

	// 触发并传参到修改页面
goEdit:function(e) {
	let id = e.currentTarget.dataset.id;
	let time = e.currentTarget.dataset.time;
	let name = e.currentTarget.dataset.name;
	let beginTime = e.currentTarget.dataset.begintime;
	let endTime = e.currentTarget.dataset.endtime;
	let max = e.currentTarget.dataset.max;
	console.log("发送端:" + id);
	console.log("发送端:" + name);
	console.log("发送端: " + beginTime);
	console.log("发送端:" + endTime);
	console.log("发送端: " + max);
	console.log("发送端: " + time);
	wx.navigateTo({
     url: '/pages/edit/edit?id='+id+'&time='+time+'&name='+name+'&beginTime='+beginTime+'&endTime='+endTime+'&max='+max
    })
}

edit.wxml:

<!-- edit.wxml -->
<view class="form-container">
	<form bindsubmit="formSubmit" class="formContent">
		<view class='form-item form-id'>
			<text>id</text>
			<input name="id" type='text' value='{{id}}' disabled="true" placeholder-style='font-size:28rpx;' style="color:#AFAFAF"></input>
		</view>
		<view class="form-item">
			<text>名称</text>
			<input name="name" type='text' value="{{name}}" placeholder-style='font-size:28rpx;' placeholder='请输入名称'></input>
		</view>
		<view class='form-item'>
			<view><text class="require">*</text>开始时间</view>
			<picker class="picker-timer" mode="time" value="{{beginTime}}" start="09:00" end="10:00" bindchange="beginTimeChange">
        <view class="picker" name="beginTime" bindtap="bindTimeChange">
      		{{beginTime}}
					<image class="picker-icon" src="../../assets/images/down_icon.png"></image>
    		</view>
  		</picker>
		</view>
		<view class='form-item'>
			<view>结束时间</view>
			<picker class="picker-timer" mode="time" value="{{endTime}}" start="10:01" end="11:01" bindchange="endTimeChange">
        <view class="picker" name="endTime" bindtap="bindTimeChange">
      		{{endTime}}
					<image class="picker-icon" src="../../assets/images/down_icon.png"></image>
    		</view>
  		</picker>
		</view>
		<view class='form-item'>
			<text>最大容纳人数</text>
			<input name="max"  type='number' value="{{max}}" placeholder-style='font-size:28rpx;' placeholder='请输入最大容纳人数'></input>
		</view>
		<view class='form-item form-admin'>
			<text>管理员</text>
			<input name="admin" type='text' value='{{admin}}' placeholder-style='font-size:28rpx;' placeholder='请输入管理员名称'></input>
		</view>
		<view class="form-item">
			<button bindtap="updataMeeting" class="btn-next" form-type="submit">提交</button>
			<button bindtap="reset" class="btn-next" form-type="reset">清空</button>
		</view>
	</form>
	
</view>

edit.js:

Page({
	data: {
		name: '',
		id: '',
		beginTime: '',
		endTime: '',
		admin: '',
		max: '',
	},

	onLoad: function(options) {
		this.initValidate(); 
		// 从列表页item传过来的值
 		console.log('接收端:' + options.id);
		console.log('接收端:' + options.name);
		console.log('接收端:' + options.max);
		console.log('接收端:' + options.beginTime);
		console.log('接收端:' + options.endTime); 
		let that = this;
		if(options.id==undefined) {
			return;
		}
		this.setData({
			id: options.id,
			name: options.name,
			beginTime: options.beginTime,
			endTime: options.endTime,
			admin: options.admin,
			max: options.max,
			keyword: options.name
		})
	}
})