greenPro/pages/template/nav-city-dropdown/nav-city-dropdown.vue

<template>
	<view class="mpvue-picker">
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<!-- #ifndef H5 -->
				<uni-icons size="16" type="info"></uni-icons>
				<!-- #endif -->
				说明 :
			</view>
			<view class="uni-helllo-text">
				<view>
					在App端可在pages.json里配置buttons，暂不支持动态改变buttons的样式，使用onNavigationBarButtonTap可监听城市选择按钮的点击事件。
				</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
			:pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
			:pickerValueArray="pickerValueArray"></mpvue-picker>

		<!-- 		<picker ref="mpvuePicker" @change="bindPickerChange" :value="index" :range="pickerValueArray" range-key="label">
			<view class="">{{pickerValueArray[index].label}}</view>
		</picker>
 -->
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker

	export default {
		components: {
			mpvuePicker
		},
		data() {
			return {
				title: 'nav-city-dropdown',
				pickerValueArray: [{
						label: '北京市',
						value: 110000
					},
					{
						label: '天津市',
						value: 120000
					},
					{
						label: '广州市',
						value: 440100
					},
					{
						label: '深圳市',
						value: 440300
					}
				],
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				index: 0,
			};
		},
		onReady() {
			// #ifdef VUE3
			this.setStyle(0, '北京市')
			// #endif
			// #ifndef VUE3
			this.setStyle(1, '北京市')
			// #endif
		},
		methods: {
			onCancel(e) {
				console.log(e);
			},
			// 单列
			showSinglePicker() {
				this.mode = 'selector';
				this.deepLength = 1;
				this.pickerValueDefault = [0];
				this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				console.log(e.label);
				// #ifdef VUE3
				this.setStyle(0, e.label)
				// #endif
				// #ifndef VUE3
				this.setStyle(1, e.label)
				// #endif
			},
			/**
			 * 修改导航栏buttons
			 * index[number] 修改的buttons 下标索引，最右边索引为0
			 * text[string] 需要修改的text 内容
			 */
			setStyle(index, text) {
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				if (text.length > 3) {
					text = text.substr(0, 3) + '...';
				}
				// #ifdef APP-PLUS
				let currentWebview = page.$getAppWebview();
				let titleNView = currentWebview.getStyle().titleNView;
				// 添加文字过长截取为3个字符，请根据自己业务需求更改
				titleNView.buttons[0].text = text;
				currentWebview.setStyle({
					titleNView: titleNView
				});
				// #endif
				// #ifdef H5
				// h5 临时方案
				const btn = document.getElementsByClassName('uni-btn-icon')[index]
				btn.innerText = text;
				// #endif
			}
		},
		onBackPress() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel();
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				this.showSinglePicker();
			}
		}
	};
</script>

<style></style>