//wxml
<block wx:for="{{message}}" wx:key="_id">
<movable-area >
<movable-view class="movable-view" direction="horizontal" inertia="true" damping="100">
<view class="list">
<view class="text">
<view class="theme">{{item.articleTitle}}</view>
</view>
<view class="pic">
<image class="img" mode="aspectFill" src="{{item.picture}}"/>
</view>
</view>
<view class="delete" bindtap="delMes">删除</view>
</movable-view>
</movable-area>
</block>
//css
movable-area{
width: 95vw;
height: 140rpx;
margin-right: -24rpx;
white-space: nowrap;
}
.movable-view{
width: 120vw;
height: 140rpx;
display: flex;
justify-content: space-between;
}
.movable-view .list{
display: flex;
width: 100vw;
}
.movable-view .list .text{
width: 70vw;
height: 140rpx;
position: absolute;
right: 20vw;
display: flex;
}
.list .theme{
width: 100%;
font-size: 40rpx;
height: 140rpx;
width: 70vw;
font-weight: 550;
padding: 10rpx;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.list .pic{ display: flex; width: 30vw; height: 140rpx;}
.list .img{ width:100%; height: 100%;}
.delete{
width: 20vw;
background-color: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
想用movable-view实现左滑删除功能,css里设置了文字分行,请问为什么不能生效呢?