Vant Weapp SwipeCell滑动单元格组件的使用

首先我们来看看官方的文档 SwipeCell 滑动单元格
中间的代码和右边的预览都对不上,而且代码也不完整,不能一目了然。
那么根据我一天下来的使用体验,就让小弟我来给各位讲讲这个组件的使用方法和我遇到的问题。如果有错误的地方也希望各位多多指正。

Vant Weapp版本为1.7.1

基础用法

复制一份官方代码:

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
  <view slot="left">选择</view>
  <van-cell-group>
    <van-cell title="单元格" value="内容" />
  </van-cell-group>
  <view slot="right">删除</view>
</van-swipe-cell>

效果图

  • 这里的官方代码中用到了两个组件,单元格组件(van-cell、van-cell-group)和滑动单元格组件(van-swipe-cell),使用时需要先引入。

SwipeCell配置项

参数说明类型默认值
name标识符,可以在 close 事件的参数中获取到string / number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled是否禁用滑动booleanfalse
  • 如果你只需要开启一侧的滑动区域,那么配置SwipeCell时,只需要配置对应一侧的滑动区域宽度即可,若两侧都配置则表示两侧均可滑动。

添加样式

可以看到滑动区域是没有样式的,所以我们需要给这些view加上class

<view slot="right" class="right">删除</view>
.right{
  background-color: red;
  height: inherit;
  width: 65px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

在这里插入图片描述

  • 这里就只给右侧的滑动区域添加,左边同理。

如果需要两个按钮,可以这样:

<van-swipe-cell right-width="{{ 130 }}">
    <view style="touch-action:none;">
        <van-cell-group>
            <van-cell title="单元格" value="内容"/>
        </van-cell-group>
    </view>
    <view slot="right" class="right">
        <view class="item">收藏</view>
        <view class="item">删除</view>
    </view>
</van-swipe-cell>
.right{  
	height: inherit;
	width: 120px;
	color: white;
	display: flex;
}
.right .item{
	background-color: red;
	width: 60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.right .item:first-child{
	background-color: green;
}

两个功能按钮

异步关闭:async-close的用法

当van-swipe-cell配置async-close时,可通过绑定close事件实现关闭行为。

<van-swipe-cell async-close bind:close="onClose">
...
</van-swipe-cell>
Page({
	// 关闭事件
	onClose(event) {},
})
  • 不使用async-close时,点击滑块区域会自动关闭。
close参数
参数类型说明
positionstring关闭时的点击位置 (left / right / cell / outside)
instanceobjectSwipeCell 实例
namestring标识符

但是!如果滑动区域只有一个功能(例如删除功能),然后你理所应当的把close事件当做滑块的点击事件来处理,可能会事与愿违。

前排提醒:滑块区域的点击事件还是需要额外绑定,具体可以往下看实践部分。

手动打开或关闭SwipeCell滑动区域

某些时候,我们可能需要添加一个按钮来打开或关闭滑动区域,亦或有多个SwipeCell时,需要手动关闭其他的SwipeCell。

方法名类型说明
openposition: “left”开启的位置 (left / right / cell / outside)
close-收起单元格侧边栏
close事件中关闭
Page({
	// 关闭事件
	onClose(event) {
		event.detail.instance.close();
	},
})
任意位置打开和关闭

通过使用微信小程序的selectComponent来获取SwipeCell实例进行开启和关闭。

<van-swipe-cell id="vsc1" async-close right-width="{{ 130 }}" bind:close="onClose">
...
</van-swipe-cell>
Page({
	funcName() {
		// 开启
		this.selectComponent("#vsc1").open({position: "right"});
		// 关闭
		this.selectComponent("#vsc1").close();
	},
})

项目实践

接下来通过项目实践,来进一步了解SwipeCell组件的用法以及我遇到的坑(生气气

需求

展示用户收藏的列表,提供取消关注的功能。

在这里插入图片描述

自定义内容

仅仅使用单元格组件作为我们的内容载体可能自由度还不够高,无法满足正常的开发需求。所以这里我们要自定义内容。

<van-swipe-cell async-close id="store{{item.store_id}}" right-width="{{ 80 }}" wx:for="{{store.data}}" wx:key="index" data-store-id="{{item.store_id}}">
	<!-- 自定义内容 -->
	<view style="touch-action:none;">
        <image src="{{ item.pic }}"></image>
        <view bindtap="goStore" data-store="{{item}}">
            <view>
	             <span>{{ item.store_name }}</span>
	             <van-tag type="success" wx:if="{{item.is_self_support}}">自营</van-tag>
            </view>
            <view>{{ item.num }}人关注</view>
        </view>
        <van-icon name="ellipsis" catch:tap="showMore" data-store-id="{{item.store_id}}"></van-icon>
    </view>
    <!-- 自定义内容 end -->
    <view slot="right">
        <view catch:tap="unlike">取消关注</view>
    </view>
</van-swipe-cell>
  • 样式就不帖上来了,了解大概长啥样就好了。

事件处理

点击按钮打开滑块区域事件

showMore(e){
    const storeId = e.target.dataset.storeId; 
    // 关闭其他swipeCell
    for (const item of this.data.store.data) {
        if (item.store_id === storeId) continue;
        this.selectComponent("#store"+item.store_id).close();
    }        
    this.selectComponent("#store"+storeId).open({position: "right"});
}
  • 手动打开的SwipeCell不会自动关闭其他SwipeCell组件,所以需要手动关闭。(滑动打开的就可以自动关闭)
SwipeCell close事件问题

如果直接使用close事件来处理业务逻辑,可能会出现意想不到的问题。

如上述wxml代码,存在点击事件绑定goStore方法,

goStore(event) {
    const store = event.currentTarget.dataset.store;
    wx.navigateTo({
        url: "/pages/hotel/hotel_details/index?id=" + store.store_id,
    })
},

该方法会跳转页面。当跳转页面时,会触发SwipeCell的close事件!

所以处理业务逻辑时,还是需要单独在一个view上绑定,不要想着偷懒哦。

可能出现的问题

渲染层错误

[渲染层错误] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

在这里插入图片描述
产生原因:可能是touchmove事件和某个滚动的操作冲突了(有了解的家人们可以留言说说原因)
解决方法:增加一个父级view并添加 style="touch-action:none;"


<van-swipe-cell async-close right-width="{{ 65 }}" bind:close="onClose">
    <view style="touch-action:none;">
        <van-cell-group>
            <van-cell title="单元格" value="内容"/>
        </van-cell-group>
  	</view>
  	<view slot="right" class="right">删除</view>
</van-swipe-cell>

点击空白处关闭全部SwipeCell组件

很遗憾,目前我也没找到合适的办法。(哪位小伙伴知道的快快告诉我!)
你可以尝试说服产品经理说不要这个功能。

  • 23
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值