colorui是UI框架: 超好用的一款

小程式二維碼體驗:

:

引入方式:

1.先去下載colorui https://github.com/weilanwl/ColorUI

把colorui資料夾 複製進去就行

2. 在app.wxss中全域性引入:

@import 'colorui/main.wxss';
@import 'colorui/icon.wxss';
@import 'colorui/animation.wxss';

三.就可以用了, 下面我舉幾個例子:

1.側滑刪除編輯:

2.程式碼:

list.wxml

<view id
 
="addressList">
  <view class="cu-list menu-avatar">
    <view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{5}}" wx:key="index" bindtouchstart="ListTouchStart" bindtouchmove="ListTouchMove" bindtouchend="ListTouchEnd" data-target="move-box-{{index}}">
      <
 
view class="content">
        <view class="name"><text>李小沫</text>13372291330</view>
        <view class="address">
          <text>預設</text>
          江蘇省
        </view>
      </view>
      <view class="move">
        <view class="bg-grey"
 
 bindtap="edit">編輯</view>
        <view class="bg-red" bindtap="delete">刪除</view>
      </view>
    </view>
  </view>
  <!-- 新建收貨地址按鈕 -->
  <view class="addBtn" bindtap="toAddAdress">新建收貨地址</view>
</view>

list.wxss

/* pages/my/addressList/addressList.wxss */
#addressList{
  padding-bottom: 250rpx;
}
.cu-list.menu-avatar>.cu-item{
  border-bottom: 1rpx solid #ccc
}
.cu-list.menu-avatar>.cu-item:last-child{
  border: none
}
.cu-list.menu-avatar>.cu-item .content{
  left: 0rpx;
  width: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;
}
.cu-list.menu-avatar>.cu-item .content>.name{
  font-weight: 500
}
.cu-list.menu-avatar>.cu-item .content>.name>text{
  margin-right: 14rpx
}
.cu-list.menu-avatar>.cu-item .content>.address{
  color: #666
}
.cu-list.menu-avatar>.cu-item .content>.address>text{
  color: #FF6A72;
  margin-right: 10rpx
}

/* 新建收貨地址按鈕 */
.addBtn{
  width: 690rpx;
  height: 88rpx;
  background-image: linear-gradient(to right, #FF6363 , #FF1414);
  background-image: -webkit-linear-gradient(to right, #FF6363 , #FF1414);
  border-radius:44rpx;
  color: #fff;
  font-size: 28rpx;
  line-height: 88rpx; 
  font-weight:600;
  text-align: center;
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  margin: 0 auto
}

list.js

// pages/my/addressList/addressList.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },
// ListTouch觸控開始
  ListTouchStart(e) {
    this.setData({
      ListTouchStart: e.touches[0].pageX
    })
  },

  // ListTouch計算方向
  ListTouchMove(e) {
    this.setData({
      ListTouchDirection: e.touches[0].pageX - this.data.ListTouchStart > 0 ? 'right' : 'left'
    })
  },

  // ListTouch計算滾動
  ListTouchEnd(e) {
    if (this.data.ListTouchDirection =='left'){
      this.setData({
        modalName: e.currentTarget.dataset.target
      })
    } else {
      this.setData({
        modalName: null
      })
    }
    this.setData({
      ListTouchDirection: null
    })
  },
  // 編輯
  edit() {
    console.log('編輯')
  },
  // 刪除
  delete() {
    console.log('刪除')
  },
  // 跳轉新建聯絡人
  toAddAdress() {
    wx.navigateTo({
      url: '/pages/my/addAddress/addAddress',
    })
  },
})

更多參考連結:https://blog.csdn.net/weixin_43674113/article/details/107714542

https://blog.csdn.net/steve1988717/article/details/96099036?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight

https://www.jianshu.com/p/bc916e388452