HarmonyOS应用开发-swiper样式滑动消失

一.创建包
二.打开default下的common目录，创建一个新的目录components，自定义组件swiperview

swiperview代码如下：
Swiperview.hml:
<div class=“todo-item”
style=“transform : translateX({{ transX }}); opacity : {{ opacity }}; background-color : {{ bgColor }};”
on:touchstart=“touchStart” on:touchmove=“touchMove” on:touchend=“touchEnd” show=“{{ isShow }}”>
<text class=“title” style=“color: {{hintColor}};” >HINT</text>
<image src=“…/…/images/ic_swipe_praise.png” class=“img”></image>
<text class=“comment” style=“color: {{commentColor}}”>这是一个左右滑动回弹的控件，滑动过程中透明度会动态变化，滑动到一定距离控件会消失。</text>
<text class=“txt” style=“color: {{hintColor}}”>Swipe to dismiss this hint</text>
</div>
Swiperview.css:
.todo-item {
width: 100%;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border-radius: 8px;
flex-direction: column;
}

.title {
margin-start: 10px;
margin-top: 10px;
color: #D6D8D7;
font-size: 15px;
}

.comment {
margin: 10px;
color: white;
font-size: 15px;
}

.txt {
margin-start: 10px;
margin-bottom: 10px;
color: #D6D8D7;
font-size: 12px;
}

.img {
position: absolute;
right: 10px;
top: 10px;
width: 48px;
height: 48px;
}
Swiperview.js:
var startX;
var dx;
const DISTANCE = 180;
const MIN_DISTANCE = 30;
const MAX_SPEED = 1.3;

var startTime;
var endTime;

export default {
props: {
bgColor: ‘#FFFFFF’,
hintColor: ‘#D6D8D7’,
commentColor: ‘#FFFFFF’,
},
data: {
transX: ‘0px’,
opacity: 1.0,
isShow: true,
},
touchStart(event) {
startX = event.touches[0].localX;
startTime = new Date().getTime();
},
touchMove(event) {
dx = event.touches[0].localX - startX;
if (Math.abs(dx) < MIN_DISTANCE) {
return;
}
this.transX = dx + ‘px’;
this.opacity = Math.abs(parseFloat((360 - Math.abs(dx))) / 360);
},
touchEnd(event) {
endTime = new Date().getTime();
let moveTime = endTime - startTime;
if (Math.abs(dx) > DISTANCE && parseFloat(Math.abs(dx) / moveTime) < MAX_SPEED) {
this.isShow = false;
} else {
this.transX = ‘0px’;
this.opacity = 1.0;
}
},
}

然后再主页index中，导入swiperview，并编写如下代码：
index.hml:
<element name=‘swipeview’ src=‘…/…/common/components/swipeview/swipeview.hml’></element>

<div class=“container”>

<list scrolleffect="no" >
    <list-item clickeffect="false">
        <div style="flex-direction : column;">
            <swipeview bg-color='#99FF0000'></swipeview>

            <swipeview bg-color='#99FF7D00'></swipeview>

            <swipeview bg-color='#99FFFF00' hint-color='#00ae9d'></swipeview>

            <swipeview bg-color='#9900FF![图片1.png](https://dl-harmonyos.51cto.com/images/202203/739fc1927a992df20c5566c73896ce997e3f2a.png?x-oss-process=image/resize,w_306,h_268)00'></swipeview>

            <swipeview bg-color='#9900FFFF'></swipeview>

            <swipeview bg-color='#990000FF'></swipeview>

            <swipeview bg-color='#99FF00FF'></swipeview>
        </div>
    </list-item>
</list>

</div>
index.css:
.container {
flex-direction: column;
background-color: #5e7c85;
padding-top: 52px;
height: 100%;
}
index.js:
export default {
data: {
title: ‘World’
}
}
二．案例效果