uni-app三级联动笔记

uniapp官方组件picker
uniapp使用三级联动picker，官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件（日期、时间、三级联动picker）（mpvue-picker）
日期、时间、三级联动picker这个插件有个注意的事项，用HBuilderX导入插件的时候，会覆盖掉page/index/index.vue这个文件，需要注意。
日期、时间、三级联动picker插件要使插件显示，在元素上做一个点击方法click(){this.KaTeX parse error: Expected 'EOF', got '}' at position 20: ….picker.show();}̲,插件的作者用this.refs.picker.show();显示插件，但是适用的时候，会报错，可能是我自己的原因，我并没有按照他的代码来写，我只需要三级联动，后面改成this.$refs.region.show();就可以适用了。
上一下代码，除三级联动，其他picker都是适用官方文档。

<template><view class="back"><view class="bottom"><form action=""><view class="form"><!-- 头像 --><view class="touxiang"><text class="itemtitle">头像</text><image class="huiyuanimg" src="" mode="widthFix"></image></view><!-- 昵称 --><view class="form-item"><text class="itemtitle">昵称</text><input type="text" value="" class="input" maxlength="140" /></view><!-- 性别 --><view class="form-item"><text class="itemtitle">性别</text><picker mode="selector" :range="gender" @change="bindSexChange"><view class="picker">{{gender[uploadInfo.gender]}}<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image></view></picker></view><!-- 出生日期 --><view class="form-item form-item-bottom"><text class="itemtitle">出生日期</text><picker mode="date" @change="bindBirthdayChange"><view class="picker">{{uploadInfo.birthday}}<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image></view></picker></view><view class="datedirsday"></view><!-- 联系方式 --><view class="form-item"><text class="itemtitle">联系方式</text><input class="input" type="number" value="" maxlength="11" /></view><!-- 年级 --><view class="form-item"><text class="itemtitle">年级</text><picker mode="selector" :range="array" @change="bindClassChange"><view class="picker">{{array[uploadInfo.grade]}}<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image></view></picker></view><!-- 地区 --><view class="form-item"><text class="itemtitle">地区</text><view class="pickerpicker" @click="toggleTab"><view class="picker"><text v-if="uploadInfo.region.length==0"></text><text v-else>{{uploadInfo.region[0]}}，{{uploadInfo.region[1]}}，{{uploadInfo.region[2]}}</text><image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image></view></view><w-picker mode="region"  @confirm="bindCityChange" ref="region"></w-picker></view><!-- 保存 --><view class="lijishengji"><button type="primary" class="sengjibtn" v-on:click="sengjibtn">保存</button></view></view></form></view></view>
</template><script>import wPicker from "@/components/w-picker/w-picker.vue";export default {components: {wPicker},data() {return {gender: ['男', '女'],array: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],uploadInfo: {nickname: '', //昵称avatar: '',gender: '', //性别birthday: '', //生日mobile: '', //手机grade: '', //年级province: '', //省份city: '', //城市area: '', //地区region: []}}},onLoad() {},methods: {//性别选择点击bindSexChange(e) {this.uploadInfo.gender = e.target.value;},//生日选择点击bindBirthdayChange(e) {this.uploadInfo.birthday = e.target.value;},//年级选择点击bindClassChange(e) {this.uploadInfo.grade = e.target.value;},//地区点击出现选项toggleTab() {this.$refs.region.show();},//地区选择点击bindCityChange(e) {this.uploadInfo.region=e.checkArr;},//保存点击sengjibtn(){console.log(1);}},mounted() {}}
</script><style>@import "./huiyuanxinxi.css";
</style>

mpvue-picker这个会比较简单，根据作者提供的进行编写。
mpvue-picker选择地区获取的省市区为字符串，而第一个为数组，个人觉得数组会比较方便一个，因为保存的时候还要把省市区存入数据库的。
以上仅是个人学习工作所理解的。

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！

uni-app三级联动笔记相关推荐

app uni 三级联动地址_uni-app 微信小程序 picker 三级联动
之前做过一个picker的三级联动功能,这里分享代码给大家具体代码: // An highlighted block {{ areaname }} {{ buildingname }} {{ flo ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...
【笔记】Select2 三级联动
- 效果图 - 插件 - jsp页面 <link rel="stylesheet" type="text/css" href="static/p ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
微信小程序的省市区三级地址mysql_微信小程序实现三级联动-省市区
序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml {{province}} {{city}} {{c ...

uni-app三级联动笔记

uni-app三级联动笔记相关推荐

最新文章

热门文章