微信小程序，添加地址，修改地址，删除地址及设为默认地址（上）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序，添加地址，修改地址，删除地址及设为默认地址（上）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序实现新增地址保存功能,微信小程序,notepad++,小程序

地址管理页面的wxml

<view style="padding-top: {{pageTopHeight}}px;">
    //判断地址有没有数据
    <view wx:if="{{addressList.length != 0}}" >
         <view wx:for="{{addressList}}" wx:key="id">
            <view style="font-weight: bolder;">收货人：{{item.name}}</view>
            <view>收货地址：{{item.region[0]}}{{item.region[1]}}{{item.region[2] 
                {{item.specific}}</view>
            <view style="display: flex;">
                <view>
                   <radio bindtap="change" checked="{{item.checked}}"  id="{{item.id}}" 
                    value="{{item.checked}}"></radio>
                   <text style="margin-left: 20rpx;">设为默认</text>
                </view>
                <view style="flex:1;text-align: right;">
                     <text bindtap="editli" id="{{item.id}}">编辑</text>
                     <text style="margin-left: 60rpx;" bindtap="delAddress" data-id=" 
                     {{index}}">删除</text>
                </view>
            </view>
         </view>
    </view>
    <view wx:else>
        <image style="width: 100%;height: 100vh;" src="/Images/8.png"></image>
    </view>
  <view class="footer">
      <view class="shopping_cart" style="background-color: #ec3c20" bindtap="addaddress"> 
         添加新地址
      </view>
      <view class="shopping_cart" style="background-color: #fa8412;margin-left: 40rpx;"> 
         导入微信地址
     </view>
  </view>
</view>

他的wxss

/* 尾部 */
.footer{
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    border-top: 1px solid #f1f1f1;
    position: fixed;
    bottom: 0;
    z-index: 99;
    padding: 0rpx 30rpx;
    font-size: 12px;
    color: #676774;
    display: flex;
}
.shopping_cart{
    margin: 10rpx 0;
    color: #fff;
    padding: 0 80rpx;
    font-size: 16px;
    line-height: 80rpx;
    border-radius: 100rpx;
}
/*单选框  */
   /* // 大小设置 */
   radio .wx-radio-input {
    border-radius: 50%;
    width: 24px;
    height: 24px;
  }
  /* // 边框颜色 */
  radio .wx-radio-input {
    border-color: #87858a;
  }
  /* // 选中状态设置 */
  radio .wx-radio-input.wx-radio-input-checked {
    border-color: #e93323 !important;
    background: #e93323!important;
   }
.weui-cell__bd{
    margin-left: 20rpx;
}

ok,现在样子设好了，现在就是他的js

 //添加地址
  addaddress:function(){
        wx.navigateTo({ 
          url:"/components/addaddress/addaddress",
         })
    },
 //修改
    editli:function(e){
      //e.currentTarget.id当前的id
        wx.navigateTo({  
            url:`/components/addaddress/addaddress?id=${e.currentTarget.id}`,
         })
    },
//页面数据
  onLoad: function (options) {
      var arr = wx.getStorageSync('addressList') || [];//添加地址的本地存储
      var id = 0  //由于没有加id,所以在这里遍历添加id  
      for (let index = 0; index < arr.length; index++) {
           arr[index].id = id+=1
      }
      wx.setStorageSync('addressList', arr);//保存
      this.setData({//渲染到页面
            addressList: arr,
        });       
        
    },
 //设默认
    change:function(e){
      var items = this.data.addressList;
      for (var i = 0; i < items.length; i++){
        if(items[i].id==e.currentTarget.id){
          items[i].checked = true
          wx.showToast({
            title: '设置成功',
            duration:2000, 
          })
        }else{
          items[i].checked =false
        }

      }
      this.setData({
         addressList: items
      });
      wx.setStorageSync('addressList', items);
    },
 /* 删除 */
  delAddress: function (e) {
    var id = e.currentTarget.dataset.id//数组下标
        this.data.addressList.splice(id, 1);
        // 更新data数据对象  
        if (this.data.addressList.length > 0) {
            wx.showToast({
                title: '删除成功',
                duration:2000,
            })
            this.setData({
            addressList: this.data.addressList
            })
            wx.setStorageSync('addressList', this.data.addressList);
        } else {
            this.setData({
                addressList: this.data.addressList
                })
                wx.setStorageSync('addressList', []);
            
        }
},

现在地址管理这个页面就完成了文章来源地址https://www.toymoban.com/news/detail-766545.html

到了这里，关于微信小程序，添加地址，修改地址，删除地址及设为默认地址（上）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！