微信小程序自定义三级联动

最新推荐文章于 2023-11-29 18:47:48 发布

原创

最新推荐文章于 2023-11-29 18:47:48 发布 · 3.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #前端

本文介绍如何在微信小程序中自定义实现三级联动效果，使用picker-view组件解决微信默认picker组件的限制，如底部弹出和数据不可更改等问题。通过示例代码展示具体实现过程。

自定义三级联动。无论三级，二级，一级基本异曲同工。
微信给我们提供了picker组件,但是限制也非常多。只能从底部弹出，省市区数据不可更改等一系列问题。
所以我们自己去做一个三级联动，微信也提供了组件picker-view来帮助我们实现

废话不多说。看效果和代码

index.wxml

<view class="index">
  <view class="input" bindtap="getbox" wx:if="{
  
  {!inputShow}}" style="color: #999;">请选择地址</view>
  <view class="input" bindtap="getbox" wx:if="{
  
  {inputShow}}">{
  
  {province}} {
  
  {city}} {
  
  {area}}</view>
  <!-- 省市区弹框 -->
  <view class="box" wx:if="{
  
  {boxShow}}">
    <!-- 阴影 -->
    <view class="black" bindtap="hidebox"></view>