위 챗 애플 릿 은 목록 항목 이 미끄러져 삭제 단 추 를 표시 하 는 기능 을 실현 합 니 다.
위 챗 애플 릿 은 목록 컨트롤 을 제공 하지 않 았 기 때문에 iOS 에서 자주 사용 하 는 목록 항목 이 왼쪽으로 미끄러져 삭제 되 는 기능 도 없 었 고 SO 는 스스로 할 수 밖 에 없 었 다.
원 리 는 매우 간단 하 다.2 개의 층,위의 층 으로 정상 적 인 내용 을 표시 하고 아래 의 층 은 삭제 단 추 를 표시 한다.즉,손가락 이 미 끄 러 지 는 거 리 를 기록 하고 동태 적 으로 상층 요 소 를 이동 하 는 것 이다.물론 상층 부 는 절대적 인 포 지 셔 닝 을 사용한다.
wxml:
<view class="container">
<view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
<view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
<view class="left">
<view>{{record.type}} {{record.count+record.unit}}</view>
<view class="summary">{{record.remark}}</view>
</view>
<view class="right">
{{record.datetime}}
</view>
</view>
<view class="delete-box">
<view> </view>
</view>
</view>
</view>
wxss:
@import "../common/weui.wxss";
.container {
box-sizing: border-box;
padding: 0 0 0 0;
}
.record {
display: flex;
flex-direction: row;
align-items: center;
width:100%;
height: 120rpx;
position: absolute;
justify-content: space-between;
background-color: #fff;
}
.record .right{
margin-right: 30rpx;
color: #888888;
}
.record .left{
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.record .left .summary{
color: #aaa;
font-size: 30rpx;
line-height: 30rpx;
}
.record-box{
height: 120rpx;
width: 100%;
border-bottom: 1rpx solid #ddd;
background-color: #fff;
}
.delete-box{
background-color: #e64340;
color: #ffffff;
float: right;
height: 100%;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.record-box:last-child {
border-bottom: 0;
}
.record .r-item {
}
JS 코드:
var detailList = [
{ datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: ' ', remark: ' ' },
{ datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: ' ' },
{ datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: ' ' }
];
var recordStartX = 0;
var currentOffsetX = 0;
Page(
{
data: {
detailList: detailList
}
,
recordStart: function (e) {
recordStartX = e.touches[0].clientX;
currentOffsetX = this.data.detailList[0].offsetX;
console.log('start x ', recordStartX);
}
,
recordMove: function (e) {
var detailList = this.data.detailList;
var item = detailList[0];
var x = e.touches[0].clientX;
var mx = recordStartX - x;
console.log('move x ', mx);
var result = currentOffsetX - mx;
if (result >= -80 && result <= 0) {
item.offsetX = result;
}
this.setData({
detailList: detailList
});
}
,
recordEnd: function (e) {
var detailList = this.data.detailList;
var item = detailList[0];
console.log('end x ', item.offsetX);
if (item.offsetX < -40) {
item.offsetX = -80;
} else {
item.offsetX = 0;
}
this.setData({
detailList: detailList
});
}
}
);
읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.