nav-city-dropdown.vue
3.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<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>