uniapp开发微信小程序底部地区选择弹框

个人项目地址: SubTopH前端开发个人站

(自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面)

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目,欢迎提出您的建议😊

实现效果

功能介绍:

  1. 支持默认值直接显示滚动定位
  2. 选择上一次后,下一级重置请选择
  3. 选中样式可自定义
  4. 点击确认可校验省市县时候全部选择

 直接上代码模板部分(利用uniapp中的picker-view进一步封装)

<template><view><viewclass="tui-actionsheet-class tui-actionsheet":class="[show ? 'tui-actionsheet-show' : '']"><view class="regional-selection"><view class="selection-top"><text class="top-title">请选择地址区域</text><imagesrc="/static/image/bar-close.png"class="close-img"@tap="handleClickMask"/></view><view class="selection-title"><text>省份</text><text>城市</text><text>区县</text></view><!-- 区域滚动选择 --><picker-viewclass="picker-view"indicator-style="height:40px"mask-style="background-image: linear-gradient(to top, #ffffffcc,#fff, #fff)"@change="bindPickerChange":value="value"><!-- 省 --><picker-view-column><viewclass="item":class="{ active: activeProvince === index }"v-for="(item, index) in provinces":key="item.key">{{ item.label }}</view></picker-view-column><!-- 市 --><picker-view-column><viewclass="item":class="{ active: activeCity === index }"v-for="(item, index) in citys":key="item.key">{{ item.label }}</view></picker-view-column><!-- 县 --><picker-view-column><viewclass="item":class="{ active: activeCounty === index }"v-for="(item, index) in countys":key="item.key">{{ item.label }}</view></picker-view-column></picker-view><button type="default" class="confirm-btn" @click="confirmSelect">确认</button></view></view><!-- 遮罩层 --><viewclass="tui-actionsheet-mask":class="[show ? 'tui-mask-show' : '']"@tap="handleClickMask"></view></view>
</template>

javaScript部分代码

<script>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick } from "vue";
import { different } from "@/utils/common.js";
import {getEconomize,getMarket,getCounty,
} from "@/api/modules/common.api.js";   
// 以上省市县的接口,可根据开发实际情况前端写死或者后端请求数据
export default {name: "tuiActionsheet",props: {//点击遮罩 是否可关闭maskClosable: {type: Boolean,default: true,},//显示操作菜单show: {type: Boolean,default: false,},// 初始化显示的地区currentAddress: {type: Array,},},setup(props, ctx) {watch(() => props.show,(val) => {if (val) {data.provinces = [{ key: "0", label: "请选择" }];data.citys = [{ key: "1", label: "请选择" }];data.countys = [{ key: "2", label: "请选择" }];data.inCurrentAddress = props.currentAddress;inGetEconomize();}});const data = reactive({inCurrentAddress: [],value: [0, 0, 0],provinces: [{ key: "0", label: "请选择" }],citys: [{ key: "1", label: "请选择" }],allCitys: [], //保存已请求的数据countys: [{ key: "2", label: "请选择" }],allCountys: [],activeProvince: 0,activeCity: 0,activeCounty: 0,});onBeforeMount(() => {});onMounted(() => {});// 获取省const inGetEconomize = () => {// 获取省数据getEconomize({ data: {} }).then((res) => {if (res.code) return;data.provinces.push(...res.data);dataHandle("provinces", 0);});};// 获取市const inGetCitys = (code) => {getMarket({ data: { marketCode: code } }).then((res) => {if (res.code) return;data.citys.push(...res.data);dataHandle("citys", 1);});};// 获取县const inGetCountys = (code) => {getCounty({ data: { countyCode: code } }).then((res) => {if (res.code) return;data.countys.push(...res.data);dataHandle("countys", 2);});};const dataHandle = (attribute, col) => {// data[attribute].unshift();const echo = data.inCurrentAddress[col];let index = data[attribute].findIndex((item) => item.label === echo);index = index < 0 ? 0 : index;setActiveStyle(col, index);const key = data[attribute][index].key;if (col === 0) {inGetCitys(key); //获取市}if (col === 1) {inGetCountys(key); //获取县}};// 设置选中值和样式const setActiveStyle = (column, index) => {nextTick(() => {// 设置初始化选中data.value[column] = index;setActiveValue(data.value);});};// 滚动选择const bindPickerChange = (e) => {const changeIndex = different(data.value, e.detail.value);data.value = e.detail.value;setActiveValue(data.value);changeSelectHandle(changeIndex);};const changeSelectHandle = (index) => {if (index === 0) {data.citys = data.citys.splice(0, 1);inGetCitys(data.provinces[data.value[0]].key); //获取市}if (index === 1) {data.countys = data.countys.splice(0, 1);if (data.citys.length) {inGetCountys(data.citys[data.value[1]].key); //获取县}}};// 设置选中项的index控制选中样式const setActiveValue = (arr) => {data.activeProvince = arr[0];data.activeCity = arr[1];data.activeCounty = arr[2];};// 确认选择const confirmSelect = () => {const { provinces, citys, countys, value } = data;const index = value.indexOf(0);if (index !== -1) {let msg;switch (index) {case 1:msg = "请选择城市";break;case 2:msg = "请选择区县";break;default:msg = "请选择省份";}uni.showToast({icon: "none",title: msg,});} else {const confirmArr = [provinces[value[0]],citys[value[1]],countys[value[2]],];ctx.emit("confirm", confirmArr);handleClickCancel();}};// 点击遮罩层const handleClickMask = () => {if (!props.maskClosable) return;handleClickCancel();};// 点击取消const handleClickCancel = () => {ctx.emit("chooseCancel");};return {confirmSelect,handleClickMask,handleClickCancel,bindPickerChange,...toRefs(data),};},
};
</script>

different方法判断数组中某个值的改变下标

export const different = (arr1, arr2) => {let indexfor (let i = 0; i < arr1.length; i++) {if (arr1[i] !== arr2[i]) {index = i}}return index
}

css样式代码


<style scoped lang="less">
.tui-actionsheet {width: 100%;position: fixed;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;transform: translate3d(0, 100%, 0);transform-origin: center;transition: all 0.3s ease-in-out;// background: #eaeaec;min-height: 100rpx;
}.tui-actionsheet-show {transform: translate3d(0, 0, 0);visibility: visible;
}
.regional-selection {position: relative;text-align: center;height: 818rpx;background: #fff;border-radius: 32rpx 32rpx 2rpx 2rpx;overflow: hidden;.selection-top {height: 100rpx;line-height: 100rpx;position: absolute;top: 0;z-index: 9999;width: 100%;border-bottom: 1rpx solid #f4f6f9;.top-title {text-align: center;font-size: 30rpx;color: #262626;font-weight: 600;}.close-img {position: absolute;width: 50rpx;height: 50rpx;right: 24rpx;top: 25rpx;}}.selection-title {position: absolute;top: 100rpx;height: 100rpx;line-height: 100rpx;z-index: 9999;width: 100%;font-size: 30rpx;display: flex;color: #262626;justify-content: space-around;}.picker-view {width: 750rpx;height: 560rpx;margin-top: 20px;/deep/.uni-picker-view-content {padding: 0rpx 0 !important;}.item {height: 40px !important;line-height: 40px;text-align: center;font-size: 26rpx;color: #606266;font-weight: normal !important;&.active {color: #0080ff;font-size: 30rpx;}}}.confirm-btn {margin-top: 30rpx;height: 88rpx;width: 690rpx;font-size: 30rpx;border-radius: 16rpx;line-height: 88rpx;background: #0080ff;color: #fff;&::after {border: none;}}
}.tui-actionsheet-mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);z-index: 9996;transition: all 0.3s ease-in-out;opacity: 0;visibility: hidden;
}.tui-mask-show {opacity: 1;visibility: visible;
}
</style>

效果预览

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37308.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React Native 图片组件基础知识

在 React Native 中使用图片其实跟 HTML 中使用图片一样简单&#xff0c;在 React Native 中我们使用Image组件来呈现图片的内容&#xff0c;其中主要的属性有&#xff1a;source。这个属性主要是设置图片的内容&#xff0c;它可以是网络图像地址、静态资源、临时本地图像以及本…

Android侧滑栏(一)可缩放可一起移动的侧滑栏

在实际的各类App开发中&#xff0c;经常会需要做一个左侧的侧滑栏&#xff0c;类似于QQ这种。 今天这篇文章总结下自己在开发中遇到的这类可以跟随移动且可以缩放的侧滑栏。 一、实现原理 使用 HorizontalScrollView 实现一个水平方向的可滑动的View&#xff0c;左布局为侧滑…

Camx--概述

该部分代码主要位于 vendor/qcom/proprietary/ 目录下&#xff1a; 其中 camx 代表了通用功能性接口的代码实现集合&#xff08;CamX&#xff09;&#xff0c;chi-cdk代表了可定制化需求的代码实现集合&#xff08;CHI&#xff09;&#xff0c;从图中可以看出Camx部分对上作为H…

Linux 性能分析之iostat命令详解

Linux 性能分析之iostat命令详解 iostat命令是IO性能分析的常用工具&#xff0c;其是input/output statistics的缩写。本文将着重于下面几个方面介绍iostat命令&#xff1a; iostat的安装iostat命令行选项说明iostat输出内容分析如何确定磁盘IO的瓶颈iostat实际案例 命令的安…

django boostrap html实现可拖拽的左右布局,鼠标拖动调整左右布局的大小或占比

一、实现的效果 最近需要在Django项目中,实现一个左右布局的html页面,页面框架使用的是boostrap。但这个布局不是简单的左右分栏布局,而是需要实现可以通过鼠标拖拽的方式动态调整左右两侧布局的大小和占比。效果大致如下: 一开始,页面分为左右两块布局: 鼠标放到中间的…

Python脚本之连接MySQL【四】

本文为博主原创&#xff0c;未经授权&#xff0c;严禁转载及使用。 本文链接&#xff1a;https://blog.csdn.net/zyooooxie/article/details/124640412 之前写了篇 Python脚本之连接MySQL【三】&#xff0c;日常使用过程中&#xff0c;代码实际有很多改动&#xff0c;特此更新…

【先进PID控制算法(ADRC,TD,ESO)加入永磁同步电机发电控制仿真模型研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

定量分析计算51单片机复位电路工作原理 怎么计算单片机复位电容和电阻大小

下面画出等效电路图 可以知道单片机内必然有一个电阻RX&#xff0c;为了简化分析&#xff0c;我们假设他是线性电阻&#xff08;不带电容&#xff0c;电感的支路&#xff09; 还有一个基础知识&#xff1a; 电容器的充电放电曲线&#xff1a; 还需要知道电容电压的变化是连续…

微信小程序data-item设置获取不到数据的问题

微信小程序data-item设置获取不到数据的问题 简单说明&#xff1a; 在微信小程序中&#xff0c;通过列表渲染使用wx:for根据数组中的每一项重复渲染组件。同时使用bindtap给每一项绑定点击事件clickItem&#xff0c;再通过data-item绑定数据。 **问题&#xff1a;**通过data-i…

观察者模式实战

场景 假设创建订单后需要发短信、发邮件等其它的操作&#xff0c;放在业务逻辑会使代码非常臃肿&#xff0c;可以使用观察者模式优化代码 代码实现 自定义一个事件 发送邮件 发送短信 最后再创建订单的业务逻辑进行监听&#xff0c;创建订单 假设后面还需要做其它的…

取个对象值导致系统崩溃

取个对象值导致系统崩溃 前言 想必各位小伙经常在项目中遇到一些错误&#xff0c;取对象值的时候&#xff0c;经常报错,又或者某些项目突然就挂经常都是出现在一些对象取值上面&#xff0c;然后就被领导一顿训斥 报错分析 例如&#xff1a; 下面这个报错大家想必不会陌生&am…

最大交换(力扣)枚举 JAVA

给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。 示例 2 : 输入: 9973 输出: 9973 解释: 不需要交换。 注意: 给定数字的范围是 [0, 10^8] 解题思路&#xff1a; 1、数最…

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…

山东布谷科技直播软件源码Nginx服务器横向扩展:搭建更稳定的平台服务

在直播软件源码平台中&#xff0c;服务器扮演着重要的角色&#xff0c;关系着视频传输、数据处理、用户管理等工作的顺利完成。随着互联网的迅猛发展&#xff0c;直播行业也随之崛起&#xff0c;全世界的人们都加入到了直播软件源码平台中&#xff0c;用户流量的增加让服务器的…

视频高效剪辑,轻松平均分割视频,生成高质量M3U8

您是否在处理视频剪辑时常常面临繁琐的切分工作&#xff1f;是否希望能够快速而精准地平均分割视频&#xff0c;并生成适用于在线播放的高质量m3u8文件&#xff1f;现在&#xff0c;我们的智能视频剪辑大师为您提供了一种简便而高效的解决方案&#xff01;无需复杂操作&#xf…

Leaflet入门,Leaflet如何实现vue双向绑定数据添加到图片标记物到地图上,动态根据vue数据更新到地图上以及鼠标经过标记物显示提示框

前言 本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式实现vue数据绑定地图数据,实现地图标记物与vue数据的双向联动更新,以及鼠标经过标记物显示提示框功能。 实现效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定…

【量化课程】02_3.投资学基础概念

文章目录 1. 投资和投资学的关系1.1 什么是投资&#xff1f;1.2 什么是投资学&#xff1f; 2. 投资学的主要内容2.1 金融市场与投资环境2.1.1 金融资产2.1.2 债券市场的意义2.1.3 金融市场与经济2.1.4 投资过程2.1.5 竞争性的市场2.1.6 市场参与者2.1.7 主要的市场债券市场外汇…

Stable Diffusion 插件开发经验

Stable Diffusion近来大热,但是插件开发的资料少之又少。 这里提供一些插件开发的经验,可供参考。 1.替换启动页。 如果你想要在运行Stable Diffusion的基础上想要一些独有的操作,不想要进行裁剪,直接替换启动页面,那么就需要在webui中进行替换 这里modules.ui.create_ui…

基于ipad协议的gewe框架进行微信群组管理(二)

友情链接 geweapi.com 点击访问即可。 获取群组详情 小提示&#xff1a; 该接口可以一次查询20个群组查询出来的信息是不带公告的 请求URL&#xff1a; http://域名地址/api/group/detail 请求方式&#xff1a; POST 请求头&#xff1a; Content-Type&#xff1a;applica…

2009年下半年 软件设计师 上午试卷

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…