uni加radio-group列表选择

点击选择学号，跳转到第二个页面

 

 父组件：

<u-form-item prop="xh" label="学号:" borderBottom>
	<view class="gss">
		<text class="gs" v-if="inputForm.xh" @click="choosegs">{{inputForm.xh}}</text>
		<text class="gs" v-else @click="choosegs">选择学号</text>
	</view>
</u-form-item>


choosegs() {
	uni.navigateTo({
		url: '/pages/knbz/choosexs'
	})
},

子组件：

<template>
	<view class="cantain">
		<cu-custom class="top" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">选择学号</block>
		</cu-custom>
		<view>

			<view class="cu-bar search">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="请输入学号" v-model="curWord" confirm-type="search"
						@input="inputWord"></input>
				</view>
				<button class="cu-btn sm bg-green" @click="choosegs">确定选择</button>
			</view>

			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
				<view class="cu-list menu-avatar">
					<radio-group class="block">
						<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
							v-for="(item, index) in list" :key="index" @touchstart="ListTouchStart"
							@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
							<view class="content">
								<p>{{item.xm}} ({{item.xh}})
								<p>学生类别：{{item.xslbdm}}
								</p>
								<p>
									{{item.yx}}/{{item.zy}}/{{item.bj}}
								</p>
							</view>
							<radio @tap="RadioChange(item)" class="round"
								:class="item.xh==row.xh?'checked':''" :checked="item.xh==row.xh?true:false"
								:value="item.xh"></radio>
						</view>
					</radio-group>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import knbzService from "@/api/jcgl/knbzService";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 使用mixin (在main.js注册全局组件)
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				upOption: {
					noMoreSize: 3, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					empty: {
						tip: '~ 搜索无结果 ~' // 提示
					}
				},
				CustomBar: this.CustomBar,
				list: [], // 数据列表
				modalName: null,
				curWord: "", //当前搜索关键词
				row:{}
			}
		},
		methods: {
			// 搜索
			doSearch(word) {
				this.curWord = word
				this.list = []; // 先清空列表,显示加载进度
				this.mescroll.resetUpScroll();
			},
			// 输入监听
			inputWord(e) {
				// this.curWord = e.detail.value // 已使用v-model,无需再次赋值
				// 节流,避免输入过快多次请求
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.doSearch(this.curWord)
				}, 300)
			},
            //换成自己项目中懒加载的方式
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// // 联网加载数据
				knbzService.getjxjxx({
					current: page.num,
					size: page.size,
					xh: this.curWord,
				}).then((
					data
				) => {
					let curPageData = data.records
					this.mescroll.endBySize(curPageData.length, data.total);
					//如果是第一页需手动制空列表
					if (page.num == 1)
						this.list = [];
					//追加新数据
					this.list = this.list.concat(curPageData);
				}).catch(e => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			RadioChange(item) {
				this.row = item
			},
			choosegs() {
				let pages = getCurrentPages()
				let currPage = pages[pages.length - 1];   //当前页面
				let prevPage = pages[pages.length - 2];  //上一个页面
				//修改前一页数据
				prevPage.stuForm = this.row
				prevPage.inputForm.xh = this.row.xh
                //返回上一页
				uni.navigateBack({
					delta: 1,
				})
			}

		}
	}
</script>

<style>
	.ellipsis-description {
		font-size: 12px;
		line-height: $line-height-base;
		display: -webkit-box;
		/*作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 1;
		/*显示的行数；如果要设置2行加...则设置为2*/
		overflow: hidden;
		/*超出的文本隐藏*/
		text-overflow: ellipsis;
		/* 溢出用省略号*/
		-webkit-box-orient: vertical;
		/*伸缩盒子的子元素排列：从上到下*/
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 29px;
		width: calc(100% - 50px);
		line-height: 1.6em;
	}
.cu-item {
	padding:20upx 50upx !important;
}

	.cu-list>.cu-item .move {
		width: 160px;
	}

	.cu-list>.cu-item.move-cur {
		-webkit-transform: translateX(-160px);
		transform: translateX(-160px);
	}

	.cantain {
		height: 100%;
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url(@/static/img/topbg.png);
	}

	.top {
		color: #fff;
	}

	.content {
		vertical-align: middle;
		margin-right: 15upx;
	}

	.search {
		background-color: white;
		display: flex;
		padding-right: 30upx;
	}

	.cu-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20upx 30upx;
		border-bottom: 1px solid #eee;
	}

	.cu-item p:nth-child(1) {
		color: #333333;
		font-size: 28upx;
		margin-bottom: 6upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 600upx;
	}

	.cu-item p:nth-child(2) {
		color: #999999;
		font-size: 24upx
	}
	.cu-item p:nth-child(3) {
		color: #999999;
		font-size: 24upx;
		margin-top: 5upx;
	}
</style>