提交 443466c9 编写于 作者: 郭胜强

优化示例

上级 b0fa24a2
......@@ -540,6 +540,9 @@
"path": "index-list/index-list",
"style": {
"navigationBarTitleText": "索引列表index-list",
"mp-weixin":{
"disableScroll":true
},
"app-plus": {
"bounce": "none"
}
......@@ -634,4 +637,4 @@
"text": "模板"
}]
}
}
}
......@@ -65,7 +65,7 @@
onShareAppMessage() {
return {
title: this.shareText ? this.shareText : "欢迎体验uni-app",
path: '/pages/component/component',
path: '/pages/tabBar/component/component',
imageUrl:this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
}
},
......@@ -187,7 +187,7 @@
shareOPtions.title = "欢迎体验uniapp";
shareOPtions.miniProgram = {
id:"gh_33446d7f7a26",
path:"/pages/component/component",
path:"/pages/tabBar/component/component",
webUrl:"http://uniapp.dcloud.io",
type:0
};
......
......@@ -205,7 +205,7 @@
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/API/API'
path: '/pages/tabBar/API/API'
}
},
onNavigationBarButtonTap(e){
......
......@@ -70,7 +70,7 @@
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/component/component'
path: '/pages/tabBar/component/component'
}
},
onNavigationBarButtonTap(e){
......
......@@ -162,7 +162,7 @@
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/template/template'
path: '/pages/tabBar/template/template'
}
},
onNavigationBarButtonTap(e) {
......
<template>
<view class="mvpue-picker">
<view class="page-hd">
<view class="page-title">mvpue-picker 使用示例</view>
<view class="page__desc">选中的值:</view>
<view class="picker-text">{{pickerText}}</view>
</view>
<view class="page-bd">
<button type="default" @click="showMulLinkageTwoPicker">二级联动示例</button>
<button type="default" @click="showMulLinkageThreePicker">三级联动示例</button>
</view>
<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" mode="multiLinkageSelector" :deepLength="2" :pickerValueDefault="pickerValueDefault"
@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onCancel="onCancel"
@onConfirm="onConfirm"></mpvue-city-picker>
</view>
<view class="mvpue-picker">
<view class="page-hd">
<view class="page-title">mvpue-picker 使用示例</view>
<view class="page__desc">选中的值:</view>
<view class="picker-text">{{pickerText}}</view>
</view>
<view class="page-bd">
<button type="default" @click="showSinglePicker">单列选择</button>
<button type="default" @click="showMulLinkageTwoPicker">二级联动</button>
<button type="default" @click="showMulLinkageThreePicker">三级城市联动</button>
</view>
<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
@onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
</view>
</template>
<script>
import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
import cityData from '../../../common/city.data.js';
// https://github.com/zhetengbiji/mpvue-picker
import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
// https://github.com/zhetengbiji/mpvue-citypicker
import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
import cityData from '../../../common/city.data.js';
export default {
components: {
mpvuePicker,
mpvueCityPicker
},
data() {
return {
pickerValueDefault: [0, 0],
pickerValueArray: cityData,
cityPickerValueDefault: [0, 0, 1],
themeColor: '#007AFF',
pickerText: ''
};
},
methods: {
onCancel(e) {
console.log(e);
},
// 二级联动选择
showMulLinkageTwoPicker() {
this.$refs.mpvuePicker.show();
},
// 三级联动选择
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show();
},
onConfirm(e) {
this.pickerText = JSON.stringify(e);
}
},
onUnload() {
if (this.$refs.mpvuePicker.showPicker) {
this.$refs.mpvuePicker.pickerCancel()
}
if (this.$refs.mpvueCityPicker.showPicker) {
this.$refs.mpvueCityPicker.pickerCancel()
}
}
};
export default {
components: {
mpvuePicker,
mpvueCityPicker
},
data() {
return {
pickerValueDefault: [0, 0],
pickerSingleArray: [{
label: '中国',
value: 1
},
{
label: '俄罗斯',
value: 2
},
{
label: '美国',
value: 3
},
{
label: '日本',
value: 4
}
],
mulLinkageTwoPicker: cityData,
cityPickerValueDefault: [0, 0, 1],
themeColor: '#007AFF',
pickerText: '',
mode: '',
deepLength: 1,
pickerValueDefault: [0]
};
},
methods: {
onCancel(e) {
console.log(e)
},
// 单列
showSinglePicker() {
this.pickerValueArray = this.pickerSingleArray
this.mode = 'selector'
this.deepLength = 1
this.pickerValueDefault = [0]
this.$refs.mpvuePicker.show()
},
// 二级联动选择
showMulLinkageTwoPicker() {
this.pickerValueArray = this.mulLinkageTwoPicker
this.mode = 'multiLinkageSelector'
this.deepLength = 2
this.pickerValueDefault = [0, 0]
this.$refs.mpvuePicker.show()
},
// 三级联动选择
showMulLinkageThreePicker() {
this.$refs.mpvueCityPicker.show()
},
onConfirm(e) {
this.pickerText = JSON.stringify(e)
}
},
onUnload() {
if (this.$refs.mpvuePicker.showPicker) {
this.$refs.mpvuePicker.pickerCancel()
}
if (this.$refs.mpvueCityPicker.showPicker) {
this.$refs.mpvueCityPicker.pickerCancel()
}
}
};
</script>
<style>
.page-hd {
padding: 80upx;
}
.page-hd {
padding: 80upx;
}
.page-title {
font-size: 40upx;
font-weight: 800upx;
}
.page-title {
font-size: 40upx;
font-weight: 800upx;
}
.page-bd {
padding: 30upx;
}
.page-bd {
padding: 30upx;
}
.page__desc {
margin-top: 20upx;
}
.page__desc {
margin-top: 20upx;
}
.picker-text {
color: #6D6D6D;
}
.picker-text {
color: #6D6D6D;
}
button {
margin-top: 30upx;
}
button {
margin-top: 30upx;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册