微信小程序仿京东省市县地址选择

望月寄明

于 2021-09-10 23:07:06 发布

阅读量1.4k

点赞数 5

分类专栏：前端学习笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq_36723759/article/details/120231059

版权

该博客介绍了如何在微信小程序中实现类似京东的省市区县地址选择功能，包括展示效果图和小程序的wxml、wxss及js文件的部分代码。作者提到，完整代码因积分限制未提供，但可在其个人企鹅群获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

请添加图片描述

因为是外包项目，代码以实现功能为要求而已，轻喷。

小程序部分代码

wxml

<view class="page">
<view class="content">
    <view class="perosn item">
        <text>收货人 :</text>
        <input bindinput="inputName" value="{
  {formData.name}}"  placeholder="请填写收货人姓名"/>
    </view>
    <view class="phone  item">
        <text>手机号码:</text>
        <input  bindinput="inputPhone" value="{
  {formData.phone}}" placeholder="请填写收货人手机号"/>
    </view>
    <view class="area item"  bindtap="handleArea">
        <text>所在地区:</text>
        <input  bindinput="inputArea" value="{
  {formData.area}}"  disabled="true"
         unselectable='on'
         placeholder="请选择省市区"  />
    </view>
    <view class="detail item">
        <text>详细地址:</text>
        <input bindinput="inputDetail" value="{
  {formData.detail}}"  placeholder="街道、楼牌号详细地址"/>
    </view>
    <view class="tag">
        <text>标签</text>
    </view>
    <view class="is-default">
        <view>
            <text>设置默认地址</text>
            <text>提醒: 每次下单会默认推荐使用地址</text>
        </view>
        <view>
            <switch checked="{
  {switchChecked}}" bindchange="switchChange"/>
        </view>
    </view>

</view>
<view class="bottom">
    <view class="add-address" bindtap="saveAndUse">保存并使用</view>
</view>
<view class="province-city-area" wx:if="{
  {isShowActoion}}">
  <view class="content-field {
  {isShowActoion?'show-animation':''}}" >
      <view class="content" >
        <view class="header" >
          <text class="title">请选择所在地区</text>
          <view class="close" bindtap="toClose">x</view>
        </view>
      <view class="country">中国大陆</view>
      <view class="select-province-city-area">
          <view  class="options" wx:for="{
  {options}}" wx:key="index">
              <view bindtap="optionChange"  data-index="{
  {index}}"  class="{
  { item.isSelect?'selected': '' }}">{
  {item.name}}</view>
          </view>
      </view>
      <view class="province-field-select" wx:if="{
  {navIndex==1}}">
          <view class="hot-city">
            <view class="title">热门城市</view>
            <view class="hot-city-area">
                <view class="city" 
                    wx:for="{
  {hotCity}}" 
                    wx:key="index"
                    data-index="{
  {index}}"
                    bindtap="hotCitySelect"
                    >{
  {item.shortName}}</view>
            </view>
         </view>
        <view class="options-content">
            <view wx:for="{
  {provinceAlphaList}}" wx:key="index">
                <view class="alpha-content">{
  {item}}</view>
                <view>
                    <view class="area-content"  
                    wx:for="{
  {provinceDataMap[item]}}"
                    wx:for-item="subItem"
                    wx:for-index="subIndex"
                    wx:key="index"
                    data-alpha="{
  {item}}"
                    data-index="{
  {subIndex}}"
                    bindtap="provinceSelect"
                    >
                       <image wx:if="{
  {subItem.isSelect}}" style="width:40rpx;height:40rpx"  mode=&