uni-app 列表消息滚动的实现
一、插件下载地址:https://ext.dcloud.net.cn/plugin?id=1179二、将插件里面的common文件复制到自己项目中去,在自己项目中App.vue中引入css(@import 'common/uni.css';)三、将tony-scroll.vue实例复制到自己项目页面去使用即可得到滚动效果示例代码:<template><view class="ho
·
一、插件下载地址:https://ext.dcloud.net.cn/plugin?id=1179
二、将插件里面的common文件复制到自己项目中去,在自己项目中App.vue中引入css(@import 'common/uni.css';)
三、将tony-scroll.vue实例复制到自己项目页面去使用即可得到滚动效果
示例代码:
<template>
<view class="home">
<view class="list uni-flex uni-column">
<view class="wrap-item">
<view class="lis uni-flex uni-column" :animation="animationData">
<view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
<view class="swiper-item item_title uni-flex list_item">
<view class="userlistmsg" :class="index%2?'cor':'non'">
<view>{{ item.time }}</view>
<view>{{ item.phone }}</view>
<view>{{ item.prize }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
time: '陈先生1',
phone: '201903.1',
prize: '领取成功'
},
{
time: '陈先生2',
phone: '201903.1',
prize: '领取成功'
},
{
time: '陈先生3',
phone: '201903.1',
prize: '领取成功'
},
{
time: '陈先生4',
phone: '201903.1',
prize: '领取成功'
},
{
time: '陈先生5',
phone: '201903.1',
prize: '领取成功'
},
{
time: '陈先生6',
phone: '201903.1',
prize: '领取成功'
}
],
scrollHeight: 0, //向上滚动距离
height: 0, //.lis高度(滚动框高度)
animationData: {} ,//动画对象
}
},
components: {},
mounted() {
console.log("11")
this.prizeScroll();
},
methods: {
getHeight(Class) {
let query = uni.createSelectorQuery().in(this);
query
.selectAll(Class)
.boundingClientRect(data => {
this.height = data[0].height;
})
.exec();
},
prizeScroll() {
let speed = 50;
let animation = uni.createAnimation({
duration: this.getHeight('.lis') / speed,
timingFunction: 'linear',
delay: 0
});
this.animation = animation;
setInterval(() => {
if (this.scrollHeight >= this.height) {
animation.translateY(0).step();
this.scrollHeight = 0;
this.animationData = animation.export();
} else {
this.scrollHeight = this.scrollHeight + 1;
animation.translateY(-this.scrollHeight).step();
this.animationData = animation.export();
}
}, speed);
}
}
};
</script>
<style>
page{
width: 100%;
}
.home,.list {
width: 750upx;
padding-top: 30upx;
}
.userlistmsg{
width: 100%;
display: flex;
justify-content: space-around;
}
.cor{
background: #FFF5F3 ;
}
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)