钉钉小程序省市区选择组件

VIP文章林梓阳

已于 2022-08-17 18:26:36 修改

阅读量672

点赞数 1

分类专栏：小程序文章标签： javascript 前端小程序

于 2022-05-17 10:25:58 首次发布

本文链接：https://blog.csdn.net/weixin_43930421/article/details/124814543

版权

效果图：
在这里插入图片描述

首先引入 colorUI，参考：
https://blog.csdn.net/weixin_43930421/article/details/124748879

代码实现

在 components 文件目录新建 citySelect 组件

citySelect.axml

<view>
  <view onTap="show">
    <text class="cuIcon-location"></text>
    <text class="margin-left-xs margin-right-xs">
      {
   {
    cityLab }}
    </text>
    <text class="cuIcon-unfold"></text>
  </view>
  <view a:if="{
   {showModal}}" class="cu-modal bottom-modal show">
    <view class="cu-dialog" style="width:100vw">
      <view class="cu-bar bg-white solid-bottom">
        <view class="action" onTap="show">
          <text class="text-blue">取消</text>
        </view>
        <view class="action" onTap="confirm">
          <text class="text-blue">确定</text>
        </view>
      </view>
      <view style="height:500rpx">
        <picker-view value="{
   {value}}" onChange="cityChange">
          <picker-view-column>
            <view a:for="{
   {proList}}">{
   {
   item.name}}</view>
          </picker-view-column>
          <picker-view-column>
            <view a:for="{
   {cityList}}">{
   {
   item.name}}</view>
          </picker-view-column>
          <picker-view-column>
            <view a:for="{
   {disList}}">{
   {
   item.name}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>