shanxian-work-app/component/allArea/allAreatwo.vue

<template>
	<view class="allArea">

		<view class="area1">
			<text class="arear-text" @click="Area">{{list[curVal].text}}</text>
			<image src="../../static/down.png" mode=""></image>
		</view>
		<!-- <view :animation="animationData" class="arear-list" v-show="isShow">
			<view class="arear-child-list" v-for="(items,index1) in list" :key='index1' @click="pop(index1)">
				{{items.text}}
			</view>
		</view> -->
		
	</view>
</template>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
	export default {
		data() {
			return {
				screenHeight: "",
				isShow: false,
				animationData: {},
				count: "", //点击事件次数
				curVal: '', //骑行区与第一个下标
				curId: "", //骑行区域id
				list: [{"areaID":1,"text":'郑州龙子湖'}],
			}
		},
		props: [
			'mess',
			'curVal1'
		],
		// props:['curVal1','mess'],
		watch: {
			mess(newValue, oldValue) {
				this.list = newValue
				console.log(newValuel, "这是父组件传过来的值")
			},
			curVal1(newValue, oldValue) {
				this.curVal = newValue
			}
		},
		onShow() {
			console.log('这是子组件')
		},
		beforeCreate() {
			console.log('子组件beforeCreate')
				this.list = uni.getStorageSync('allArea');
				this.curVal = uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0;
				console.log(this.list)
		},
		methods: {
			//弹框事件
			Area: function(e) {
				var list1 = uni.getStorageSync('allArea')
				var arr = []
				for (let i = 0, len = list1.length; i < len; i++) {
					arr = arr.concat(list1[i].text)
					console.log(arr)
				}
				console.log( uni.getStorageSync('allArea'),"99999")
				var area= uni.getStorageSync('allArea')
				uni.showActionSheet({
				   
					itemList: arr,
					success: function(res) {
						var list=uni.getStorageSync('allArea')
						let index=res.tapIndex
							
						this.curVal = index
						this.curId=list[index].areaID
						
						uni.setStorageSync('curVal', index)
						uni.setStorageSync('curId', list[index].areaID)
						console.log(this.curId,"index");
						this.$emit('getChild',this.list[index])
						
						// console.log(list[index].areaID,"66666");
						
					
						
					
						// this.curVal = e
						// this.curId = this.list[e].areaID
						// uni.setStorageSync('curVal', e)
						// uni.setStorageSync('curId', this.list[e].areaID)
						// this.$emit('getChild',this.list[e])
						// console.log(e, "骑行区")
						// console.log(this.curVal, "这是骑行区if")
					},
					fail: function(res) {}
				})
				// this.curVal = uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0
				// console.log(uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0, '这是下标')
				// this.isShow = !this.isShow
				// console.log(this.isShow, "这是骑行区与123456")
				// console.log(this.list)
				// var that = this
				// // this.$emit('getChild', this.isShow)
				// setTimeout(function() {
				// 	var query = uni.createSelectorQuery();
				// 	query.select('.arear-list').boundingClientRect();
				// 	query.exec(function(res) {
				// 		console.log(res[0].height, "55555555")
				// 		let height = res[0].height
				// 		that.$emit('getChild', height)
				// 		// this.$emit('getChild', this.isShow)
				// 	})
				// }, 500)

				// let height = uni.createSelectorQuery().select('arear-list')
				// height.fields({
				// 	size: true
				// }, data => {
				// 	console.log(data.height,"55555555")
				// })
				// console.log(height, "zheshizujianggaodu ")
			},
			// pop: function(e) {
			// 	this.isShow = !this.isShow
			// 	this.curVal = e
			// 	this.curId = this.list[e].areaID
			// 	uni.setStorageSync('curVal', e)
			// 	uni.setStorageSync('curId', this.list[e].areaID)
			// 	this.$emit('getChild',this.list[e])
			// 	console.log(e, "骑行区")
			// 	console.log(this.curVal, "这是骑行区if")
			// },
			//返回上一页
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.allArea {
		display: inline-block;
		position: fixed;
		padding-top: var(--status-bar-height);
		padding-bottom: 28upx;
		padding-left: 35upx;
		height: 45upx;
		margin-bottom: 20rpx;
		z-index: 1000;
		width: 100%;
		background: white;
	}
	.allArea image{
		display: inline-block;
		vertical-align: middle;
		margin-left: 20upx;
		height: 40upx;
		width: 40upx;
	}

	.iconfont {
		display: inline-block;
		height: 100%;
		font-size: 34rpx;
		width: 50rpx;
		text-align: center;
		padding: 14rpx 0;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.area1 {
		display: inline-block;
		vertical-align: middle;
		/* background-color: #007AFF; */
	}

	.iconfont {
		display: inline-block;
		height: 100%;
		font-size: 34rpx;
		width: 50rpx;
		text-align: center;
		padding: 14rpx 0;

	}

	.backIcon {
		display: inline-block;
		vertical-align: bottom;
	}

	.backIcon image {
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 40rpx;
		width: 50rpx;
	}

	.area1 {
		position: absolute;
		font-size: 32rpx;
		width: 100%;
	}

	.arear-list {
		position: absolute;
		z-index: 1000;
		left: 0;
		top: 130rpx;
		width: 90%;
		/* height: 600upx; */
		background-color: #FFFFFF;
		margin-left: 20rpx;
		padding: 0 20rpx;
	}

	.arear-child-list {
		padding: 20rpx 0;
		font-size: 30rpx;
		/* height: 200upx; */
		border-bottom: solid 1rpx #e6e6e6;
	}
</style>