小程序左滑删除

野性酷女 2023-01-17 07:41 105阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

主要用到了小程序的可移动的视图容器，在页面中可以拖拽滑动标签  movable-view

小程序文档：[https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html][https_developers.weixin.qq.com_miniprogram_dev_component_movable-view.html]

data: {
        screenWidth:'',//屏幕宽度
        dance_ary: [{
          id: 0,
          img:'',
          name: '形体舞蹈基础教学（10节）',
          type:true
        }, {
          id: 1,
          img:'',
          name: '肚皮舞（10节）',
          type:false
        }, {
          id: 2,
          img:'',
          name: '拉丁伦巴专业课（10节）',
          type:false
        }, {
          id: 3,
          img:'',
          name: '街舞专业课（10节）',
          type:false
        }, {
          id: 4,
          img:'',
          name: '钢管舞专业课（10节）',
          type:false
        }, {
          id: 5,
          img:'',
          name: '芭蕾舞专业课（10节）',
          type:false
        }]
    
     onLoad: function (options) {
        let that=this;
        //获取屏幕宽度
        wx.getSystemInfo({
          success: res => {
            console.log(res)
            that.setData({
              screenWidth:res.screenWidth
            });
          }
        });
      },

.course_cent {
      flex: 1;
      width: 100%;
      overflow: auto;
    }
    .data_list {
      width: 120%;box-sizing: border-box;
    }
    
    .course_data {
      margin-bottom: 40rpx;
    }
    
    .course_data{
      width: 100%;
      height: 300rpx;
      overflow: hidden;
    }
    .course_data_cent{
      width: 100%;
      justify-content: flex-start;align-items: center;
    }
    
    .course_data_cent,
    .course_data_left{
      height: 300rpx;
    }
    .course_data_left_center{
    width: 100%;
    height: 300rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background-color: red;
    }
    .course_data_right{
      width: 114rpx;height: 300rpx;justify-content: center;align-items: center;
    }
    .delete_img {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20221021/191d03e4200b4b629be2418561f972d5.png
[https_developers.weixin.qq.com_miniprogram_dev_component_movable-view.html]: https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html