微信小程序省市联动功能

发布日期： 2020-06-24 阅读量： 作者： 网络

最近呢刚好做了一个省市联动的功能，今天看到有人问这个怎么做，我就把我做的放上来共享一下：

首先呢，来看看效果，点击文字‘点击’，弹出选择窗口，点击取消或者确定（取消、确定按钮在选择框上边，截图有些不清楚），窗口下滑，

做这个我用的是picker-view这个组件，现在来看一看picker-view的属性：

现在开始写wxml的代码，对了，插一句，我这里是把它写成一个模板的，先看看目录结构

我们先来看看cascade.wxml里的代码：

<template name="cascade">
  <view class="cascade_box" animation="{{animationData}}">
  <view class="cascade_hei"></view>
   <view class="cascade_find">
        <view class="cascade_header">
            <text class='quxiao' catchtap="quxiao">取消</text>
            <text class="queren" catchtap="queren">确认</text>
        </view>
        <picker-view indicator-style="height: 80rpx;" style="width: 100%; height: 400rpx;" bindchange="bindChange">
            <picker-view-column>
            <view wx:for="{{sheng}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
            <view wx:for="{{shi}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
            <view wx:for="{{qu}}" wx:key='this' style="line-height: 80rpx;text-align:center;">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>
</template>

# 微信小程序 # 省市联动

上一篇: PHP 中递归函数堆栈溢出：从错误中恢复

下一篇: Vue 项目使用 htmlWebpackPlugins 动态

微信小程序省市联动功能

随便看看