介绍 & lt; swiper 类=皊wiper_container",垂直=皌rue",播放=皌rue",圆=皌rue",间隔=?000“比;
,& lt; view 类=& # 39;列表# 39;比;
,& lt; view wx:=皗{列表}},,天气:关键=癷ndex"比;
,& lt; swiper-item>
,& lt; text 类=& # 39;txt-light& # 39;在{{item.checkTime}} & lt;/text>, {{item.content}}
,& lt;/swiper-item>
,& lt;/view>
,& lt;/view>
& lt;/swiper> & lt; view 类=癱ontainer"比;
,& lt; view 类=& # 39;列表# 39;,动画=皗{animationData}}“比;
,& lt; view>
,& lt; text 类=皌xt-light"祝辞09:08,很多人的一生,基本都是自己跟别人较劲,比如别人对自己的期待,比如把别人看得太重把自己看得太轻,其实一个人最应该考虑的问题是,自己如何与自己相处,比如人去楼空的时候如何照顾好自己的孤独,比如夜深人静的时候如何跟心灵沟通。自己跟自己能和谐共处,自己跟别人就能相安无事。
,& lt;/view>
,& lt; view>
,& lt; text 类=皌xt-light"祝辞19:08,平和是待人处事的一种态度,也是做人酌一种美德。平和既是一种修养,又是一种工作方法。平和的人,从不被忙碌所萦绕,闲时吃紧,忙里悠闲。待人不严,教人勿高。宽严得宜,分寸得体。身心自在,能享受生活之乐趣。平和的人生,是和谐的人生,健康的人生。
,& lt;/view>
,& lt;/view>
& lt;/view> .container {
,背景颜色:# ccc;
,身高:150 rpx;
,保证金:20 rpx 20 rpx 20 rpx 20 rpx;,
,溢出:汽车;
}
.txt-light {
,颜色:# acadbe;
} 页面({
,/* *
,*页面的初始数据
,*/,数据:{
,
},
,/* *
,*生命周期函数——监听页面加载
,*/,onLoad: function (选项),{
,
},
,/* *
,*生命周期函数——监听页面初次渲染完成
,*/,onReady: function (), {
,
},
,/* *
,*生命周期函数——监听页面显示
,*/,昂秀:function (), {
,//this.util ();
,this.getHeight ();
},
util:大敌;function (obj), {
,console.log (obj);
,console.log (-obj.list);
,var continueTime =,(方法(时间/obj.list obj.container), +, - 1), *, 1500;
50,var setIntervalTime =,, +, continueTime;
,
,var animation =, wx.createAnimation ({
,时间:200年,,,//动画时长
,timingFunction:“linear",,//线性
,延迟://0 0,则不延迟
,});=,this.animation 动画;
,animation.translateY (obj.container) .step({,持续时间:50岁,timingFunction:, & # 39; step-start& # 39;,}) .translateY (-obj.list) .step({,持续时间:continueTime });
,this.setData ({
,animationData: animation.export ()
,})
,setInterval(),=祝辞,{
,animation.translateY (obj.container) .step({,持续时间:50岁,timingFunction:, & # 39; step-start& # 39;,}) .translateY (-obj.list) .step({,持续时间:continueTime });
,this.setData ({
,animationData: animation.export ()
,})
,},setIntervalTime)
,//setInterval(),=祝辞,{
,//animation.translateY (50) .step({,持续时间:50岁,timingFunction:, & # 39; step-start& # 39;,}) .translateY (-250) .step({,时间:5000年,});
,//this.setData ({
,//animationData: animation.export ()
,//})
,//},,6000)
},
,获得(),{
,var obj =, new 对象();
,//创建节点选择器
,var query =, wx.createSelectorQuery ();
,query.select (& # 39; .container& # 39;) .boundingClientRect ()
,query.select (& # 39; .list& # 39;) .boundingClientRect ()
,query.exec ((res),=祝辞,{=,,obj.container res [0] .height;,//,框的高度=,,obj.list res [1] .height;//,列表的高度
,//return obj;
,this.util (obj);
,})
,}
})
这期内容当中小编将会给大家带来有关怎么在微信小程序中实现自上而下字幕滚动,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>解决方案:
<强>第一种方法:
经查询,最一开始实现字幕滚动是使用的微信小程序的偷窃者组件,后来发现,使用偷窃者组件实现的效果类似于轮播图,不符合需求。
<强>第二种方法:
使用微信小程序的动画来来实现字幕滚动。
思路:
1。当列表底部到容器框的顶部时,即,内容全部走出了框外。结束字幕滚动,重新开始下一轮的滚动。
2。计算容器框的高度、列表的高度。一个框中的内容显示时长为1500(暂定),通过列表的高度除以集装箱框的高度来判断显示时长(求整数并加1(+ 1是为了显示最后一个空白框))。
实现:
wxml
wxs
js
