原生小程序地址管理--抖音小程序（详细）

HTML页面

详细地址这一块，小程序官方文档都有picker

<view class="addressBox">
    <view class="address-container">
        <!-- 新增收货地址 -->
        <view class="redact-address">
            <view class="possess-layout">
                <view class="mains">
                    <view class="address-msg">
                        <view class="item-msg">收货人</view>
                        <view class="section">
                            <input data-gater="addressObj.consignee" type="text" placeholder="请填写收货人姓名"
                                value="{{addressObj.consignee}}" bindblur="consigneeNameInput"
                                placeholder-class="phcolor" placeholder-style="font-size: 30rpx;" bindinput="bindinput"
                                maxlength="8"></input>
                        </view>
                        <view class="address-right">
                            <image src="../../../img/icon/icon-add-address-user.png"></image>
                        </view>
                    </view>
                    <view class="address-msg">
                        <view class="item-msg">手机号码</view>
                        <view class="section">
                            <input name="phone" data-gater="addressObj.phone" bindinput="bindinput" type="number"
                                placeholder="请填写收货人手机号码" value="{{addressObj.phone}}" maxlength="11"
                                bindblur="phoneInput" placeholder-class="phcolor"
                                placeholder-style="font-size: 30rpx;"></input>
                        </view>
                    </view>
                    <view class="address-msg">
                        <view class="item-msg">所在地区</view>
                        <view class="section" bindtap='select'>
                            <picker mode="region" bindchange="bindRegionChange" value="" custom-item="">
                                <text class="shuru" tt:if="{{!addressObj.area}}">请选择</text>
                                <view tt:if="{{addressObj.area}}">
                                    {{addressObj.area}}</view>
                                <view class="address-rights" bindtap='select'>

                                    <view class="right-icon"></view>

                                </view>
                            </picker>
                        </view>
                    </view>
                    <view class="address-msg">
                        <view class="item-msg">详细地址</view>
                        <view class="section">
                            <input data-gater="addressObj.address" bindinput="bindinput" type="text"
                                placeholder="街道、小区、乡镇、楼牌号等" value="{{addressObj.address}}"
                                bindblur="detailedAddressInput" placeholder-class="phcolor"
                                placeholder-style="font-size: 30rpx;" maxlength="35"></input>
                        </view>
                    </view>

                </view>
            </view>
        </view>
        

    </view>
    <view class="Defaultaddress">
        <!-- <radio checked="{{checked}}" bindtap="radiodengjiChange" style="transform: scale(0.7);" class="gg_radio" color="#1A7FFF">

        </radio> -->
        <radio-group bindchange="checkboxChange" value="{{addressObj.isDefault}}" data-ids="{{isDefault}}">
                <radio checked="{{checked}}" bindtap="radiodengjiChange" style="transform: scale(0.7);" class="gg_radio" color="#1A7FFF">
                </radio>
          </radio-group>
        <text class="p-Defaultaddress-text">设为默认地址</text>

    </view>
    <view class="action-contact">
            <button class="AddAddress" class="{{flag?'addAddress2':'addAddress1'}}" type="default" size="default" disabled="{{flag}}" bindtap="saveAddress">保存地址</button>
    </view>
</view>

设为默认地址为radio赋值

Page({
  data: {
    checked:false
  }
  })
  //默认地址
radiodengjiChange:function(e) {
  var check = this.data.checked;
  if (check) {
    this.data.checked = false;
    that.data.addressObj.isDefault = 1
    console.log("已取消选中");
  } else {
    this.data.checked = true;
    that.data.addressObj.isDefault = 0
    console.log("已选中");
  }
  this.setData({
    "checked": this.data.checked,
  });
},

isDefault 这个字段就是控制是否为默认地址 上边的代码为isDefault 赋值为0就是默认地址，1的话就不是默认地址，点击保存

列表里面展示：

里表里面的默认地址显示与隐藏

主要代码：
加个if就可以

<label class="radio">
  <view class='left'>
    <text data-id="{{[index,item.id]}}" bindtap="resertP" class='{{!item.isDefault ? 'radioColor2' :"radioColor"}}' tt:if="{{item.isDefault == 0}}">默认地址</text>
   </view>
</label>

地址列表页面HTML

<view class="{{maskFlag ? '':'mask'}}">
    <view class="addressBox">
        <view class="address-container">
            <!-- 收货地址管理 -->

            <view tt:if="{{tag==1}}" style="min-height: 500rpx;">
                <view style="min-height: 50vh;">
                    <radio-group bindchange="radioChange">
                        <view class='list-item' tt:for="{{addressList}}" tt:key="item.id">
                            <view class="head-container">
                                <view class="item-consignne">收 货 人 : &nbsp{{item.consignee}}</view>
                                <view class='item-head'>
                                    <text class='phone'>{{item.phone}}</text>
                                </view>
                            </view>


                            <view class='item-desc'>
                                <text>{{item.area}}{{item.address}}</text>
                            </view>

                            <view class='item-edit'>
                                <label class="radio">
                                    <view class='left'>
                                        <text data-id="{{[index,item.id]}}" bindtap="resertP" class='{{!item.isDefault ? 'radioColor2' :"radioColor"}}' tt:if="{{item.isDefault == 0}}">默认地址</text>
                                    </view>
                                </label>

                                <view class='right'>
                                    <view class="edit">
                                        <navigator url="/pages/saveAddress/saveAddress?id={{item.id}}&address={{item.address}}&area={{item.area}}&consignee={{item.consignee}}&isDefault={{item.isDefault}}&phone={{item.phone}}"
                                            hover-class="none" style="display: inline;">
                                            <view class="edit-box"></view>
                                            <text bindtap="navigateToEdit" data-id="1">编辑</text>
                                        </navigator>
                                    </view>
                                    <view class="del" bindtap="delAddr" data-id="{{item.id}}">
                                        <view data-id="{{item.id}}" class="del-box"></view>
                                        <text data-id="{{item.id}}">删除</text>
                                    </view>

                                </view>
                            </view>
                        </view>
                    </radio-group>
                </view>

                <view class="action-contact">

                    <!-- <button class="addAddress3" type="default" size="mini"> -->
                        <!-- <navigator url="/pages/saveAddress/saveAddress" hover-class="none"> -->
                            <button class="AddAddress" bindtap="AddAddress"
                        type="default" size="default">添加地址</button>
                            <!-- <view class="addIcon"> </view>
                            <text class="addA">添加地址</text> -->
                        <!-- </navigator> -->
                    <!-- </button> -->
                </view>
            </view>
            <!-- 新增收货地址 -->

            <view tt:if="{{tag==0}}" class="redact-address">
                <!-- <view class="noaddress"> -->
                    <image
                        src="../../images/noaddress.png">
                    </image>
                    <button class="AddAddress" bindtap="AddAddress"
                        type="default" size="default">添加地址</button>
                <!-- </view> -->
                <!-- <view class="possess-layout">
                    <view class="mains">
                        <view class="address-msg">
                            <view class="item-msg">收货人</view>
                            <view class="section">
                                <input class="input-class" data-gater="addressObj.consignee" type="text"
                                    placeholder="请填写收货人姓名" value="{{addressObj.consignee}}"
                                    bindblur="consigneeNameInput" placeholder-style="font-size: 28rpx;color: #999999;"
                                    bindinput="bindinput" maxlength="8"></input>
                            </view>
                            <view class="address-right">
                                <image src="../../../img/icon/icon-add-address-user.png"></image>
                            </view>
                        </view>
                        <view class="address-msg">
                            <view class="item-msg">手机号码</view>
                            <view class="section">
                                <input class="input-class" data-gater="addressObj.phone" bindinput="bindinput"
                                    type="number" placeholder-style="font-size: 28rpx;color: #999999;"
                                    placeholder="请填写收货人手机号码" value="{{addressObj.phone}}" maxlength="11"
                                    bindblur="phoneInput"></input>
                            </view>
                        </view>
                        <view class="address-msg">
                            <view class="item-msg">所在地区</view>
                            <view class="section" bindtap='select'>
                                <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item=""
                                    >
                                    <text class="shuru" tt:if="{{region.length<=0}}">请选择</text>
                                    <view tt:if="{{region.length>0}}">
                                        {{addressObj.area}}</view>
                                    <view class="address-rights" bindtap='select'>

                                        <view class="right-icon"></view>

                                    </view>
                                </picker>
                            </view>

                        </view>
                        <view class="address-msg">
                            <view class="item-msg">详细地址</view>
                            <view class="section">
                                <input class="input-class" data-gater="addressObj.address" bindinput="bindinput"
                                    type="text" placeholder-style="font-size: 28rpx;color: #999999;"
                                    placeholder="街道、小区、乡镇、楼牌号等" value="{{addressObj.address}}"
                                    bindblur="detailedAddressInput" maxlength="30"></input>
                            </view>
                        </view>

                    </view>
                </view> -->
                <!-- <view class="action-contact">
                    <button disabled="{{flag}}" class="{{flag?'addAddress2':'addAddress1'}}" bindtap="saveAddress"
                        type="default" size="mini">保存地址</button>
                </view> -->
            </view>

            <!-- 按钮部分 -->
        </view>
    </view>
</view>

点击编辑的时候跳转页面，并把数据携带过来
主要用到的就是data-abc(自己定义的）=‘也是自己定义的’
拿radio是否设为默认地址举个例子

<view class="Defaultaddress">
  <radio-group bindchange="checkboxChange" value="{{addressObj.isDefault}}" data-ids="{{isDefault}}">
    <radio checked="{{checked}}" bindtap="radiodengjiChange" style="transform: scale(0.7);" class="gg_radio" color="#1A7FFF">
    </radio>
  </radio-group>
  <text class="p-Defaultaddress-text">设为默认地址</text>
</view>

在js页面接收转过来的数据
在onLoad中

// 接收传过来的isDefault
    if(options.isDefault == 0){
      this.setData({
        checked: true,
      })
    }else{
      this.setData({
        checked: false,
      })
    }

演示一下取消默认地址


修改成功，此时的默认地址也跟着修改了
在试一下修改成默认地址

点击保存地址

OK可以了
删除的话就是传一个id就行 编辑也是传id
菜鸟一枚，欢迎各位技术大佬来指出错误，互相学习