当前位置:编程学习 > > 正文

vue动态列表布局(vue项目实现左滑删除功能完整代码)

时间:2022-04-04 11:47:02类别:编程学习

vue动态列表布局

vue项目实现左滑删除功能完整代码

实现效果

vue动态列表布局(vue项目实现左滑删除功能完整代码)

代码如下

html

  • <template>
      <li>
        <li class="biggestBox">
          <ul>
            <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
            <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
              <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
              <li @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
                <li class="contant">
                  <img class="image" :src="item.imgUrl" alt />
                  <li class="rightBox">
                    <li>{{item.title}}</li>
                    <li>{{item.subheading}}</li>
                    <li>{{item.faddish}}</li>
                    <li>{{item.price}}</li>
                  </li>
                </li>
              </li>
              <li class="removeBtn" @click="remove" :data-index="index">删除</li>
            </li>
          </ul>
        </li>
      </li>
    </template>
    
  • js

  • export default {
      name: "index",
      data() {
        return {
          lists: [
            {
              title: "标题1",
              imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg" alt="vue动态列表布局(vue项目实现左滑删除功能完整代码)" border="0" />
    
  • css

  • <style>
    * {
      /* 消除默认内外边距 */
      margin: 0;
      padding: 0;
    }
    body {
      background: rgb(246, 245, 250);
    }
    .biggestBox {
      overflow: hidden; /*超出部分隐藏*/
    }
    ul {
      /* 消除 ul 默认样式 */
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .li_vessel {
      /* 全部样式 0.2秒 缓动*/
      transition: all 0.2s;
    }
    /* =0隐藏 */
    .li_vessel[data-type="0"] {
      transform: translate3d(0, 0, 0);
    }
    /* =1显示 */
    .li_vessel[data-type="1"] {
      /* -64px 设置的越大可以左滑的距离越远,最好与下面删除按钮的宽度以及定位的距离设置一样的值*/
      transform: translate3d(-64px, 0, 0);
    }
    /* 删除按钮 */
    .li_vessel .removeBtn {
      width: 64px;
      height: 103px;
      background: #ff4949;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 22px;
      position: absolute;
      top: 0px;
      right: -64px;
      line-height: 103px;
      text-align: center;
      border-radius: 2px;
    }
    /* 左边的图片样式 */
    .contant {
      overflow: hidden; /*消除图片带来的浮动*/
      padding: 10px;
      background: #ffffff;
    }
    
    .contant .image {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      float: left;
    }
    /* 右边的文字信息样式 */
    .rightBox {
      overflow: hidden;
      padding-left: 8px;
    }
    .rightBox li:first-child {
      font-weight: bold;
    }
    .rightBox li:nth-child(2) {
      margin-top: 4px;
      font-size: 14px;
    }
    .rightBox li:nth-child(3) {
      width: 24px;
      background: rgb(219, 91, 113);
      color: white;
      font-size: 12px;
      text-align: center;
      padding: 2px 4px 2px 4px;
      margin-left: auto;
    }
    .rightBox li:last-child {
      color: red;
      font-size: 14px;
      font-weight: bold;
    }
    </style>
    
  • 完整代码如下

  • <template>
      <li>
        <li class="biggestBox">
          <ul>
            <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 -->
            <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key="index">
              <!-- "touchstart" 当手指触摸屏幕时候触发  "touchend"  当手指从屏幕上离开的时候触发  "capture" 用于事件捕获-->
              <li @touchstart.capture="touchStart" @touchend.capture="touchEnd" @click="oneself">
                <li class="contant">
                  <img class="image" :src="item.imgUrl" alt />
                  <li class="rightBox">
                    <li>{{item.title}}</li>
                    <li>{{item.subheading}}</li>
                    <li>{{item.faddish}}</li>
                    <li>{{item.price}}</li>
                  </li>
                </li>
              </li>
              <li class="removeBtn" @click="remove" :data-index="index">删除</li>
            </li>
          </ul>
        </li>
      </li>
    </template>
    
    <script>
    export default {
      name: "index",
      data() {
        return {
          lists: [
            {
              title: "标题1",
              imgUrl: "https://z3.ax1x.com/2021/05/18/gfwKHg.jpg" alt="vue动态列表布局(vue项目实现左滑删除功能完整代码)" border="0" />
    
  • 以上就是vue 实现左滑删除功能的详细内容,更多关于vue左滑删除的资料请关注开心学习网其它相关文章!

    标签:
    上一篇

    猜您喜欢

    热门推荐