van-swipe-cell的使用

van-swipe-cell的使用

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。大家及时保存，说不定啥时候就没了。

效果 (向左拖动出现删除)

点击删除

wxml

<view>
<!-- 数据列表 -->
<van-swipe-cell
  id="swipe-cell"
  right-width="{{ 65 }}"
  async-close
  bind:close="onClose"
>
  <van-cell-group>
    <van-cell 
    title="单元格" 
    value="内容" 
    label="描述"
    border="{{ false }}"
    />
  </van-cell-group>
  <view slot="right" class="delete">删除</view>
</van-swipe-cell>
</view>

wxss

.van-cell {
  touch-action: none;
}
.delete {
  height: 100%;
  text-align: center;
  width: 65px;
  line-height: 45px;
  color: #fff;
  background-color: #ec132d;
}

js

Page({
  data: {

  },
  onClose(event) {  // 删除数据
    const { position, instance } = event.detail;
    switch (position) {
      case 'left':
      case 'cell':
        instance.close();
        break;
        case 'right':
        wx.showModal({
          content: '确定要删除吗？',
          success: function (sm) {
            if (sm.confirm) {
              instance.close();
            } else if (sm.cancel) {
              console.log('用户点击取消')
            }
          }
        })    
      break;
    }
  },
  onLoad: function (options) {

  },
})