wxml
<!--pages/mycollect/mycollect.wxml-->
<!--最外层大盒子 -->
<
view
class=
"collect_big_box"
>
<!--列表盒子 -->
<
view
class=
"collect_list_box"
>
<
scroll-view
bindscrolltolower=
"lower"
scroll-y=
"true"
style=
"height: 990rpx;"
>
<!--中部搜索结果列表盒子-->
<
view
class=
"recordList_box"
>
<!--外层大盒子 -->
<
view
class=
"content_box"
wx:for=
"{{arr}}"
wx:key=
"{{key}}"
>
<!--中部盒子 -->
<
view
class=
"view_ce"
>
<
view
style=
"{{item.txtStyle}}"
class=
"content_box_center"
bindtouchstart=
"touchS"
bindtouchmove=
"touchM"
bindtouchend=
"touchE"
data-index=
"{{index}}"
>
<!--图片盒子 -->
<
view
class=
"ProductIco_box"
>
<
image
class=
"ProductIco"
src=
"{{item.img}}"
></
image
>
</
view
>
<!--内容 -->
<
view
class=
"view_content"
>
<
view
class=
'view_title'
>{{item.title}}
</
view
>
<
view
class=
"view_fl"
>
<
text
>{{item.sort}}
</
text
>
<
view
class=
"view_btn_box"
>
<
text
>{{item.price}}
</
text
>
</
view
>
</
view
>
</
view
>
</
view
>
</
view
>
<!--删除按钮 -->
<
view
class=
"delete_btn"
bindtap=
'delete_btn'
data-index=
"{{index}}"
>删除
</
view
>
</
view
>
</
view
>
</
scroll-view
>
</
view
>
</
view
>
WXSS
page
{
background: #f5f5f5
;
height:
100%
;
}
.collect_list_box
{
padding-top:
20
rpx
;
}
.recordList_box
{
box-sizing:
border-box
;
/* background: #ffffff; */
}
.content_box
{
/* border-top: 1rpx solid #dcdcdc; */
border-bottom:
1
rpx
solid #ececec
;
position:
relative
;
}
.ProductIco_box
{
width:
130
rpx
;
height:
130
rpx
;
border-radius:
5px
;
border:
1
rpx
solid #ececec
;
margin-right:
18
rpx
;
float:
left
;
}
.ProductIco
{
width:
100%
;
height:
100%
;
border-radius:
5px
;
}
.view_ce
{
width:
100%
;
height:
130
rpx
;
position:
relative
;
padding-top:
20
rpx
;
padding-bottom:
30
rpx
;
/* background: red; */
border-bottom:
1
rpx
solid #ececec
;
}
.content_box_center
{
width:
100%
;
padding:
0
rpx
20
rpx
30
rpx
20
rpx
;
padding-top:
20
rpx
;
/* margin-bottom: 30rpx; */
height:
182
rpx
;
z-index:
2
;
background: #fff
;
position:
absolute
;
left:
0
;
top:
0
;
box-sizing:
border-box
;
border-bottom:
1
rpx
solid #ececec
;
}
.view_content
{
float:
left
;
width:
556
rpx
;
}
.view_title
{
display:
inline-block
;
float:
left
;
width:
556
rpx
;
font-size:
28
rpx
;
color: #393939
;
}
.view_fl
>
text
{
font-size:
22
rpx
;
color: #898989
;
margin-right:
18
rpx
;
}
.view_btn_box
>
text
{
font-size:
28
rpx
;
color: #f55212
;
}
.view_btn
{
width:
150
rpx
;
height:
44
rpx
;
border:
1px
solid #cecece
;
border-radius:
5px
;
float:
right
;
font-size:
22
rpx
;
color: #898989
;
line-height:
44
rpx
;
/* display: none; *//* margin-bottom: 5rpx; */
}
.view_text_center
,
.view_img_left
,
.view_img_right
{
float:
left
;
}
.view_img_left
,
.view_img_right
{
width:
44
rpx
;
height:
44
rpx
;
}
.view_img_left
{
border-right:
1
rpx
solid #cecece
;
}
.view_img_right
{
border-left:
1
rpx
solid #cecece
;
}
.view_text_center
{
width:
58
rpx
;
height:
44
rpx
;
text-align:
center
;
line-height:
44
rpx
;
box-sizing:
border-box
;
font-size:
22
rpx
;
color: #898989
;
}
.view_btn
image
{
width:
100%
;
height:
100%
;
}
.view_add
{
width:
44
rpx
;
height:
44
rpx
;
border:
1px
solid #cecece
;
border-radius:
5px
;
float:
right
;
font-size:
22
rpx
;
color: #898989
;
line-height:
44
rpx
;
/* margin-bottom: 5rpx; */
}
.view_img_add
{
width:
44
rpx
;
height:
44
rpx
;
}
.view_add
image
{
width:
100%
;
height:
100%
;
}
.delete_btn
{
position:
absolute
;
right:
0
;
top:
0
;
font-size:
32
rpx
;
background: #ff3b30
;
width:
134
rpx
;
height:
100%
;
text-align:
center
;
line-height:
175
rpx
;
/* border-bottom: 1px solid #ff3b30; */
color: #fff
;
z-index:
1
;
}
JS
Page
({
/**
* 页面的初始数据
*/
data
:
{
// 数据
arr
:
[
{
"txtStyle"
:
"1"
, img
:
"http://i1.umei.cc/uploads/tu/201806/9999/02218db8bd.jpg"
, title
:
"老五"
, sort
:
"你是DJ吗"
, price
:
"Can I help you"
, num
:
1
,state
:
1
},
{
"txtStyle"
:
"1"
, img
:
"http://i1.umei.cc/uploads/tu/201806/9999/02218db8bd.jpg"
, title
:
"老五"
, sort
:
"I dont no"
, price
:
"yes,you Can"
, num
:
1
},
],
delBtnWidth
:
134
,
//删除按钮宽度单位（rpx）
},
// 滚动到底部
lower
:
function
()
{
console
.log
(
"我到了底部"
)
},
//删除
delete_btn
:
function
(e
)
{
var that
=
this
;
var index
= e
.currentTarget
.dataset
.index
;
wx
.showModal
({
// title: '提示',
content
:
'确定删除吗？'
,
confirmColor
:
'#1da1f2'
,
success
:
function
(res
)
{
if
(res
.confirm
)
{
console
.log
(index
)
var list
= that
.data
.arr
;
//移除列表中下标为index的项
list
.splice
(index
,
1
);
//更新列表的状态
that
.setData
({
arr
: list
});
}
else
if
(res
.cancel
)
{
console
.log
(
'用户点击取消'
)
}
}
})
},
//手指刚放到屏幕触发
touchS
:
function
(e
)
{
// console.log(e);
//判断是否只有一个触摸点
if
(e
.touches
.length
==
1
)
{
this
.setData
({
//记录触摸起始位置的X坐标
startX
: e
.touches
[
0
].clientX
});
}
},
//触摸时触发，手指在屏幕上每移动一次，触发一次
touchM
:
function
(e
)
{
// console.log(e);
var that
=
this
if
(e
.touches
.length
==
1
)
{
//记录触摸点位置的X坐标
var moveX
= e
.touches
[
0
].clientX
;
//计算手指起始点的X坐标与当前触摸点的X坐标的差值
var disX
= that
.data
.startX
- moveX
;
//delBtnWidth 为右侧按钮区域的宽度
var delBtnWidth
= that
.data
.delBtnWidth
;
var txtStyle
=
""
;
if
(disX
==
0
|| disX
<
0
)
{
//如果移动距离小于等于0，文本层位置不变
txtStyle
=
"left:0rpx"
;
}
else
if
(disX
>
0
)
{
//移动距离大于0，文本层left值等于手指移动距离
txtStyle
=
"left:-"
+ disX
+
"rpx"
;
if
(disX
>= delBtnWidth
)
{
//控制手指移动距离最大值为删除按钮的宽度
txtStyle
=
"left:-"
+ delBtnWidth
+
"rpx"
;
}
}
//获取手指触摸的是哪一个item
var index
= e
.currentTarget
.dataset
.index
;
var list
= that
.data
.arr
;
//将拼接好的样式设置到当前item中
list
[index
].txtStyle
= txtStyle
;
//更新列表的状态
this
.setData
({
arr
: list
});
}
},
touchE
:
function
(e
)
{
// console.log(e);
var that
=
this
if
(e
.changedTouches
.length
==
1
)
{
//手指移动结束后触摸点位置的X坐标
var endX
= e
.changedTouches
[
0
].clientX
;
//触摸开始与结束，手指移动的距离
var disX
= that
.data
.startX
- endX
;
var delBtnWidth
= that
.data
.delBtnWidth
;
//如果距离小于删除按钮的1/2，不显示删除按钮
var txtStyle
= disX
> delBtnWidth
/
2
?
"left:-"
+ delBtnWidth
+
"rpx"
:
"left:0rpx"
;
//获取手指触摸的是哪一项
var index
= e
.currentTarget
.dataset
.index
;
var list
= that
.data
.arr
;
list
[index
].txtStyle
= txtStyle
;
//更新列表的状态
that
.setData
({
arr
: list
});
}
},
})