You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.3 KiB
138 lines
3.3 KiB
<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>
|
|
|