当前位置:网站首页>Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface
Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface
2022-07-05 10:19:00 【huxiaoxiao.】
Usually in use QQ perhaps WX Chat , Slide an item left in the message list , Several operation buttons will appear , What's the top , Mark unread and so on , Let's use the native applet to realize this function
wxml part
<!-- moveTarget It mainly records the current sliding or closing state -->
<view class="list-group {
{moveTarget=='move-box-'+index?('item-move'+(btnList.length>3?3:btnList.length)):''}}"
mut-bind:touchmove="touchListMove"
mut-bind:touchstart="touchListStrat"
data-target="move-box-{
{index}}"
wx:for="{
{reportDataList}}" wx:key="index">
<view class="box">
{
{item}}
</view>
<!-- btnList, The button array after sliding left -->
<view class="btn-group" wx:if="{
{btnList.length>0}}">
<view wx:for="{
{btnList}}" wx:key="index" class="btn" bindtap="tapBtn"
data-btnindex="{
{index}}">
{
{item}}
</view>
</view>
</view>
1.moveTarget
Defined in the tag data-target="move-box-{ {index}}" , For example, there are ten boxes in the page , You slide the first , Then the corresponding result is move-box-0, Then give... In the method moveTarget assignment data-target , When the two are the same , The corresponding box can slide , If you don't make this limitation , It will cause a box to slide , All boxes move together
2. mut-bind:touchmove="touchListMove" mut-bind:touchstart="touchListStrat"
Corresponding sliding start and sliding end methods :mut-bind , I don't quite understand the detailed meaning , Maybe one method works, and the other also works , Interested in Baidu for a while
3.{ {moveTarget=='move-box-'+index?('item-move'+(btnList.length>3?3:btnList.length)):''}}
Here is the corresponding (1) What it says is , If equal , Find the corresponding box , Add the following class name , The style corresponding to the class name specifies the width of sliding to the left
wxss part
/* Suppose the width of an operation button is 166rpx,item-move1 Represents the style of an operation button , And so on */
.list-group.item-move3{
transform: translateX(-500rpx);
}
.list-group.item-move2{
transform: translateX(-332rpx);
}
.list-group.item-move1{
transform: translateX(-166rpx);
}
.list-group {
position: relative;
height: 100rpx;
line-height: 100rpx;
width: 100%;
background-color: #f0f0f0;
margin-bottom: 10rpx;
transition: all .6s ease-in-out 0s;
}
/* Position the operation button on the right side of the box , Remember to add transform: translateX(100%); */
.btn-group {
position: absolute;
right: 0;
top: 0;
width: 500rpx;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(100%);
}
.btn-group .btn{
width: 166.5rpx;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
js part
All the data here is customized by me , Actually, it is possible to obtain data in the background
// pages/index/component/index.js
Component({
/**
* Initial data of the page
*/
data: {
reportDataList: [' The box 1',' The box 2'], // Page box array
btnList: [' Button 1',' Button 2',' Button 3'], // Operation button array
moveStartX: 0, // Sliding distance
moveTarget: '', // Slide control
},
// Component method Center
methods: {
// Slide start
touchListStrat(e) {
this.setData({
moveStartX: e.touches[0].pageX
})
},
// Slip end
touchListMove(e) {
let moveEndX = e.touches[0].pageX;
let moveStartX = this.data.moveStartX;
let btnList = this.data.btnList;
if (btnList.length>0) {
let size = Math.abs(moveEndX - moveStartX);
if (moveEndX < moveStartX) {
if (size > 20) {
this.setData({
moveTarget: e.currentTarget.dataset.target
})
}
} else {
this.setData({
moveTarget: ''
})
}
}
},
// Click the in line button
tapBtn(e) {
let btnindex = e.currentTarget.dataset.btnindex;
// Button click events can be defined here
// When you click the button, let moveTarget It's empty , In this way, you cannot find the box you are currently sliding , So after clicking, the slide will return to its original state
this.setData({
moveTarget: ""
})
}
}
})
The effect has been roughly achieved
边栏推荐
- > Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
- LiveData 面试题库、解答---LiveData 面试 7 连问~
- 小程序中自定义行内左滑按钮,类似于qq和wx消息界面那种
- 程序员如何活成自己喜欢的模样?
- [论文阅读] KGAT: Knowledge Graph Attention Network for Recommendation
- How to get the STW (pause) time of GC (garbage collector)?
- flink cdc不能监听mysql日志,大家遇到过这个问题吧?
- How did automated specification inspection software develop?
- 《剑来》语句摘录(七)
- @JsonAdapter注解使用
猜你喜欢
What is the most suitable book for programmers to engage in open source?
如何写出高质量的代码?
伪类元素--before和after
WorkManager學習一
【小技巧】获取matlab中cdfplot函数的x轴,y轴的数值
Workmanager Learning one
把欧拉的创新带向世界 SUSE 要做那个引路人
Detailed explanation of the use of staticlayout
B站大量虚拟主播被集体强制退款:收入蒸发,还倒欠B站;乔布斯被追授美国总统自由勋章;Grafana 9 发布|极客头条...
> Could not create task ‘:app:MyTest.main()‘. > SourceSet with name ‘main‘ not found.问题修复
随机推荐
Zblogphp breadcrumb navigation code
伪类元素--before和after
报错:Module not found: Error: Can‘t resolve ‘XXX‘ in ‘XXXX‘
Matrix processing practice
How did automated specification inspection software develop?
Glide advanced level
Glide Mastery
SLAM 01.人类识别环境&路径的模型建立
The king of pirated Dall · e? 50000 images per day, crowded hugging face server, and openai ordered to change its name
官网给的这个依赖是不是应该为flink-sql-connector-mysql-cdc啊,加了依赖调
Using directive in angualr2 to realize that the picture size changes with the window size
What is the most suitable book for programmers to engage in open source?
RMS TO EAP通过MQTT简单实现
一种用于干式脑电图的高密度256通道电极帽
Uni app running to wechat development tool cannot Preview
Interview: is bitmap pixel memory allocated in heap memory or native
Is it really reliable for AI to make complex decisions for enterprises? Participate in the live broadcast, Dr. Stanford to share his choice | qubit · viewpoint
php解决redis的缓存雪崩,缓存穿透,缓存击穿的问题
How to judge that the thread pool has completed all tasks?
[论文阅读] KGAT: Knowledge Graph Attention Network for Recommendation