支付宝小程序使用uView实现省市区三级联动的后续

上一篇讲的是使用uView2.0实现省市区三级联动（CSDN），最后无疾而终

这次我打算一雪前耻，使用uVIew1.0版本。

很好支持支付宝小程序，然后我按照官网的步骤一顿操作。。

hbuilderX的插件市场居然标明不支持支付宝小程序？？？

我就不信邪了，不用插件市场引入不就好了吗？使用npm不香吗？啊，真是一个小机灵鬼！

npm安装
使用npm的方式安装，能更方便进行升级。// 安装
npm install uview-ui@1.8.4

接下来就是各种配置了，话不多说，直接去官网搬过来，附上官网链接（npm安装方式配置 | uView - 多平台快速开发的UI框架 - uni-app UI框架）

关于SCSS
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装node-sass
npm i node-sass -D// 安装sass-loader
npm i sass-loader -D
#准备工作
在进行配置之前，请确保您已经根据安装中的步骤对uView进行了npm安装，如果没有，请先执行安装：// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y// 安装
npm install uview-ui@1.8.4
#配置步骤
#1. 引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。// main.js
import uView from "uview-ui";
Vue.use(uView);
#2. 在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。/* uni.scss */
@import 'uview-ui/theme.scss';
#3. 引入uView基础样式
注意！在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
#4. 配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。温馨提示uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
// pages.json
{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

直接使用

非常优秀，比uView2.0版本简单方便太多了

。。。。。可是

不能滑动！不能滑动！不能滑动！

这是怎么回事，没有报错，就是不能滑动！也不能点击选择

尝试加一个默认值 ["河北省", "秦皇岛市", "北戴河区"]的编码

好吧，全乱套了，省区的一点变动都没得~

然后我试着选择了一次，然后再点击选择，居然神奇般的可以了，但是就是不太稳定

但是首次点击为什么不能滑动？？

还有就是，如果我一开始就给v-model=show的show定义为true，就可以正常滑动

但是还会存在一些bug

比如一开始选择市的列数大于等于2的，

然后省直接去选择北京市，就会出现以下的情况，市辖区保留之前选中的列

我已经彻底懵了。。。。

有没有大佬知道是咋回事的啊？？

求教！！！！！！！！！

完结啦！

喜欢的留下你的小脚丫~

支付宝小程序使用uView实现省市区三级联动的后续相关推荐

支付宝小程序使用uView实现省市区三级联动的坑
第一次开发支付宝小程序,已经准备好坠坑了,没想到坑这么大!!! 本次使用的是uView的2.0版本,不是1.0,别问我为什么不用1.0 ,哈哈哈哈咋就喜欢用新的 ,所以坠坑就是自作自受了呜呜呜呜呜首 ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
支付宝小程序使用MQTT over WebSocket连接阿里云IoT物联网平台
前言之前写了一篇微信小程序使用MQTT over WebSocket连接阿里云IoT物联网平台,介绍了如何使用mqtt.js在微信小程序上连接mqtt服务器,文中顺带提了mqtt.js是支持支付宝小 ...
支付宝小程序组件库开发之省市区三级地址选择器组件
支付宝小程序开发文档中并没有提供明确的省市区选择器,不少项目还是有地址的填写需求,根据支付宝小程序现有提供的组件以及api,完全是可以实现填写地址的需求,比如分别获取省市区,通过地图来获取地址等,但是 ...
【uniapp】省市区三级联动手机端 picker，支付宝小程序省市区
效果图 1. 支付宝小程序不兼容此方法 template <picker class="pickerList" mode="multiSelector" ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
实战演练-java+微信小程序实现省市区三级联动
最终效果图官方的"省市区选择器"mode="region"里的数据是定死的由微信提供,不能做更改,好在同是picker组件mode="multiSe ...
支付宝小程序实现自定义地区三级联动
支付宝小程序自定义地区三级联动场景数据结构: [{"id": 110000,"name": "北京市","children&qu ...
Picker——uniapp[uview]微信小程序兼容支付宝小程序
博主uview-ui版本1.8.3 PICKER-时间选择组件-生日范围选择 my.datePicker 支付宝小程序api提供地址:在这里~ 地址:https://opendocs.alipay.c ...

支付宝小程序使用uView实现省市区三级联动的后续

支付宝小程序使用uView实现省市区三级联动的后续相关推荐

最新文章

热门文章

支付宝小程序 使用uView实现省市区三级联动的后续

支付宝小程序 使用uView实现省市区三级联动的后续相关推荐

最新文章

热门文章

支付宝小程序使用uView实现省市区三级联动的后续

支付宝小程序使用uView实现省市区三级联动的后续相关推荐