小程序使用Vant Weapp写的地址列表Address-List

最近想用Vant练习写一个项目，看到了文档中有AddressList这样一个组件，我们在做商城等项目时会经常使用到，但没有找到可以直接调用的代码。所以自己用各个组件写了一个类似的，并做了一些修改。

此处先上传样式，不涉及过多功能展现。

1、增加的部分

可以滑动删除，使用了van-swipe-cell的组件

2、样式展示

    

3、代码示例

wxml

<--wxml-->
<view class="myAddress">我的地址</view>

<van-radio-group 
 bind:change="radioChange" 
 value="{{radio}}">
<block 
 wx:for="{{AddressList}}" 
 wx:key="index" 
 class="addressList" 
 data-index="{{ index }}">

<view class="addressAll">
  <van-swipe-cell
  id="{{index}}"
  right-width="{{ 65 }}"
  async-close
  bind:close="onClose"
>
<van-cell-group inset>
   <van-cell>
      <view class="cellContainer">
        <van-radio
         checked-color="#07c160"
         name="{{ index }}">
        </van-radio>
        <view class="addressMsg">
           <view class="peopleMsg">
           <view class="peopleName">{{item.name}}</view>
           <view class="peoplePhone">{{item.number}}</view> 
           <view class="default" id="{{index}}" wx:if="{{index==0}}">默认</view>
        </view>
        <view class="peopleAddress">{{item.value}}</view>
      </view>
      <van-icon 
       name="edit" 
       size="50rpx" 
       class="editIcon"
       id="{{index}}" 
       bindtap="edit"/>
    </view>
   </van-cell>
</van-cell-group>

  <view slot="right" class="right">
     <view wx:key="index">删除</view>
  </view>
</van-swipe-cell>

 <van-dialog id="van-dialog"/>
<--addressAll--end-->
  </view>
 </block> 
</van-radio-group>

 <van-button round type="primary" size="large" bindtap="addAddress" class="addAddress">新增地址</van-button>

wxss 

  page{
    background-color: #eee;
  }
  .myAddress{
    margin: 20rpx;
  }
  .right{
      background-color: red;
      height: inherit;
      width: 65px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* touch-action: none */
      
    }
    /* addressList单个地址块的样式 */
  van-radio,.addressList{
      display: grid;
    }
  van-dialog{
    position: relative;
    display: grid;
  }
  /* van-swipe-cell的样式 */
  .addressAll{
    margin-bottom: 20rpx;
  }
  .cellContainer{
    display: flex;
  }
  /* 解决报错问题 */
  .van-cell {
    touch-action: none;
  }
  
  /* 默认块的样式 */
  .default{
    margin-left: 30rpx;
    width: 70rpx;
    height: 40rpx;
    line-height: 40rpx;
    color: #fff;
    border-radius: 20rpx;
    font-size: 26rpx;
    text-align: center;
    background-color: #07c160;
  }
  /* 地址详细信息name+phone+value */
  .addressMsg{
    display: grid;
    width: 500rpx;
    /* padding: 30rpx 0; */
  }
  /* name+phone */
  .peopleMsg{
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .peopleName{
    
    text-overflow: ellipsis;
    margin-right: 20rpx;
  }
  /* address */
  .peopleAddress{
    text-align:left;
  }
  /* 按钮样式 */
  .addAddress{
    position: absolute;
    bottom: 50rpx;
    width: 100%;
  }

js

import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';
//注意引入Dialog，不然会报错。不想引入dialog也可以使用wx.showModal()
Page({
    data:{
        AddressList:[
          {
            name:'牛爷爷',
            value:'翻斗花园A0022',
            number:'111111',
          },
        {
          name:'胡图图',
          value:'翻斗花园A001',
          number:'222222',
        }],
        radio:0,//选中的radio的索引值
        },
        radioChange(event) {
            this.setData({
              radio: event.detail,
            });
            console.log(this.data.radio);
          },
          onClose(event) {
             const { position, instance } = event.detail;
             switch (position) {
               case 'left':break;
               case 'cell':
                 instance.close();
                 break;
               case 'right':
            console.log("确定");
            Dialog.confirm({
              title:'提示',
              message: '确定删除吗？',
            }).then(() => {
            //确定
             instance.close();
        
            }).catch(()=>{
            //取消
             instance.close();
            });
              //另一种写法
              // wx.showModal({
              //   cancelColor: 'cancelColor',
              //   title: '提示',
              //   content: '确定删除？',
              //   cancelColor:"#000",
              //   confirmColor:"#3071a9",
              //   success: function (res) {
              //       if (res.confirm) {
              //         console.log('确定')
              //     } 
              //     else {
              //         console.log('取消')
              //       }
              //     }
              //   })
          break;
         }
         
       },
})

4、总结

引入了van-cell、van-cell-group、van-swipe-cell、van-radio、van-radio-group、van-dialog、van-button、van-icon等组件来完成这个页面布局。

注意点：1、在引入组件后，直接调用可能达不到我们想要的页面效果，此时需要我们自己设置css样式，例如：display：grid/flex等。

2、在使用swipe-cell组件时，可能会出现关于渲染层错误的报错。

 

解决方法：设置css样式：

.van-cell{
touch-action:none
}

此篇作为写完地址列表页面练习的总结，有问题欢迎指出！