利用微信的movable-area/movable-view组件
wxml
<movable-area wx:for="{{contactList}}" >
<movable-view direction="horizontal" bindtouchstart="touchstart" x="{{selectPhone == item.phone?'-90':'0'}}" data-phone="{{item.phone}}">
<view class="contact-msg">
<view>
<text>{{item.name}}</text>
</view>
<view>
<text>{{item.phone}}</text>
</view>
</view>
<view class="contact-del">删除</view>
</movable-view>
</movable-area>
wxss
.contact-msg{
height: 120rpx;
width: calc(750rpx - 60rpx);
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 30rpx 0px 30rpx;
align-items: center;
background-color: #ffffff;
}
movable-area{
height: 120rpx;
width: 100%;
border-bottom: 1px solid #dddddd;
}
movable-view{
height: 120rpx;
width: 910rpx;
display: flex;
}
js
data: {
contactList:[
{"name":"李李李","phone":"183838324"},
{"name":"李李33李","phone":"1838383225"},
{"name":"李李11李","phone":"1838383226"},
{"name":"李李22李","phone":"1838383227"}
],
selectPhone:"",
},
touchstart(e){
this.setData({
selectPhone:e.currentTarget.dataset["phone"]
})
},
- THE END -
最后修改：2020年12月22日
