小程序定制解决方法-微信小程序 文字从右往左无

2021-05-02 14:07 jianzhan
--------

小程序定制解决方法

------- 因为小程序里边应用的都是自变量操纵,因此应用起来比较难把握,今日做了一个文本从右向左翻转的案例,写法比较简易。实际效果以下图所示:

二、完成全过程:

1、处理思路:

一共两个text控制,当第一个text翻转完后应当是看到第二个text控制了,可是在这个情况下最好的方式并不是让它滚完,而是用再次又从第一个text控制刚开始翻转,操纵起来非常简易,基本完成了跑马灯的实际效果,此外加了一个假如文本不够一屏,不实行跑马灯的实际效果,并且加上了超大的间距,处理不会显示信息反复內容。以下是各一部分详细编码,要是拷贝编码加上到相应网页页面便可看到实际效果。

2、小程序合理布局网页页面wxml

 scroll-view >
 3、小程序款式网页页面 wxss

.container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} 
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}
4、小程序 js网页页面

Page({
 * 网页页面的原始数据信息
 data: {
 text: 这是一条会翻转的文本滚来滚去的文本跑马灯,非常好哟 ,
 marqueePace: 1,//翻转速度
 marqueeDistance: 0,//原始翻转间距
 marquee_margin: 30,
 size:14,
 interval: 20 // 時间间距
 * 生命周期涵数--监视网页页面载入
 onLoad: function (options) { 
 onShow: function () {
 // 网页页面显示信息
 var that = this;
 var length = that.data.text.length * that.data.size;//文本长度
 var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
 //console.log(length,windowWidth);
 that.setData({
 length: length,
 windowWidth: windowWidth
 that.scrolltxt();// 第一个字消退后马上从右侧出現
 scrolltxt: function () {
 var that = this;
 var length = that.data.length;//翻转文本的宽度
 var windowWidth = that.data.windowWidth;//屏幕宽度
 if (length windowWidth){
 var interval = setInterval(function () {
 var maxscrollwidth = length + that.data.marquee_margin;//翻转的最大宽度,文本宽度+间距,假如需要一写作字滚完后再显示信息第二行能够改动marquee_margin值等于windowWidth便可
 var crentleft = that.data.marqueeDistance;
 if (crentleft maxscrollwidth) {//分辨是不是翻转到最大宽度
 that.setData({
 marqueeDistance: crentleft + that.data.marqueePace
 else {
 //console.log( 更换 
 that.setData({
 marqueeDistance: 0 // 立即再次翻转
 clearInterval(interval);
 that.scrolltxt();
 }, that.data.interval);
 else{
 that.setData({ marquee_margin: 1000 });//只显示信息一条不翻转右侧间距加大,避免反复显示信息
三、结语:

编码比较简易,应用起来也应当不会很繁杂,期待大伙儿能效仿。假如有更好的方式望告之。

大伙儿有甚么难题或技术性上的念头能够在此与大伙儿共享,还可以添加前端开发喜好者QQ群()一起学习培训发展:【幸凡前端开发技术性沟通交流群】如需转载请注明出处:art_detail.aspx?id=844【小程序 文本从右往左无尽翻转】幸凡学习培训网 0 ---------

小程序定制解决方法

------------