官網(wǎng)地址：uni-app官網(wǎng) (dcloud.net.cn)

最終效果如下圖：?

滑動刪除需要用到 uni-ui 的 uni-swipe-action 組件和 uni-swipe-action-item

屬性名	類型	可選值	默認值	是否必填	說明
left-options	Array/Object	-	-	否	左側(cè)選項內(nèi)容及樣式
right-options	Array/Object	-	-	否	右側(cè)選項內(nèi)容及樣式

    下面的 block 元素，循環(huán)出所有的商品元素

    <!-- uni-swipe-action 是最外層包裹性質(zhì)的容器 -->
    <uni-swipe-action>
      <block v-for="(goods, i) in cart" :key="i">
          <!-- uni-swipe-action-item 可以為其子節(jié)點提供滑動操作的效果。需要通過 options 屬性來指定操作按鈕的配置信息 -->
          <uni-swipe-action-item :right-options="options" @click="onClick(goods)">
            <!-- ================================== -->
            <view style="height: 300rpx;background-color: pink;">
              根據(jù)自己需要，配置 需要的樣式
            </view>
            <!-- ================================== -->
          </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

配置option項、所有商品對象：?

參數(shù)	類型	是否必填	說明
text	String	是	按鈕的文字
style	Object	否	按鈕樣式{backgroundColor,color,fontSize}，backgroundColor默認為：#C7C6CD，color默認為：#FFFFFF，fontSize默認為：14px

    data() {
      return {
        // 這個是所有商品對象
        cart: [{
            goods_id: 1,
        },{
            good_id: 2
        }],

        // 這個是滑動后的配置項
        options: [{
          text: '刪除', // 顯示的文本內(nèi)容
          style: {
            backgroundColor: '#C00000' // 按鈕的背景顏色
          }
        }]
      }
    },

可用的事件：【我們需要的是滑動點擊刪除，用了 @click 事件，并傳遞 貨品 id】

事件稱名	說明	返回值
@click	點擊選項按鈕時觸發(fā)事件	e = {content,index} ，content（點擊內(nèi)容）、index（下標）、position (位置信息)
@change	組件打開或關閉時觸發(fā)	left:左側(cè) ，right：右側(cè)，none：關閉

得到下面的效果圖：

?

使用 filter 方法，使返回值為 不存在 剛剛傳進來滑動刪除?對應貨品id?的對象文章來源地址http://www.zghlxwxcb.cn/news/detail-693747.html

  methods: {
    // 根據(jù) Id 從購物車中刪除對應的商品信息
    onClick(goods_id) {
      // 調(diào)用數(shù)組的 filter 方法進行過濾
      this.cart = this.cart.filter(x => x.goods_id !== goods_id)
    },
  }

到了這里，關于uniapp 實現(xiàn)滑動元素刪除效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！