欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

微信小程序實(shí)現(xiàn)滾動(dòng)條功能

更新時(shí)間：2022年06月29日 16:39:29 作者：.

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動(dòng)條功能，文中示例代碼介紹的非常詳細(xì)微信小程序設(shè)置滾動(dòng)條，具有一定的參考價(jià)值微信小程序設(shè)置滾動(dòng)條，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)滾動(dòng)條的具體代碼，供大家參考，具體內(nèi)容如下

view

? 

? 
? ? 
? ? ? 
? ? ? {{text}}
? ? ? 
? ? ? {{text}} ?

? ? ? 
? ? 
? 

js

data: {
? text: "這是一條農(nóng)協(xié)動(dòng)態(tài)，請(qǐng)您仔細(xì)閱讀，若內(nèi)容有所問題，請(qǐng)聯(lián)系客服！",
? marqueePace: 1,//滾動(dòng)速度
? marqueeDistance: 0,//初始滾動(dòng)距離
? marquee_margin: 30,
? size:14,
? interval: 20 ,// 時(shí)間間隔
? HomeIndex:0,
? },

?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();// 第一個(gè)字消失后立即從右邊出現(xiàn)
? },
? ?
? scrolltxt: function () {
? var that = this;
? var length = that.data.length;//滾動(dòng)文字的寬度

? var windowWidth = that.data.windowWidth;//屏幕寬度
? if (length > windowWidth){
? ?var interval = setInterval(function () {
? ?var maxscrollwidth = length + that.data.marquee_margin;//滾動(dòng)的最大寬度，文字寬度+間距，如果需要一行文字滾完后再顯示第二行可以修改marquee_margin值等于windowWidth即可
? ?var crentleft = that.data.marqueeDistance;
? ?if (crentleft < maxscrollwidth) {//判斷是否滾動(dòng)到最大寬度
? ? that.setData({
? ? marqueeDistance: crentleft + that.data.marqueePace
? ? })
? ?}
? ?else {
? ? //console.log("替換");
? ? that.setData({
? ? marqueeDistance: 0 // 直接重新滾動(dòng)
? ? });

? ? clearInterval(interval);
? ? that.scrolltxt();
? ?}
? ?}, that.data.interval);
? }
? else{
? ?that.setData({ marquee_margin:"1000"});//只顯示一條不滾動(dòng)右邊間距加大，防止重復(fù)顯示
? }?
? }

css

.scrolltxt{
? width: 100%;
? padding:0 20rpx;
? background:#2a4d69;
}

.marquee_box {
? position:relative;
? color:white;
? height:90rpx;display:
? block;overflow:hidden;
}?
.marquee_text {
? white-space: nowrap;
? position:absolute;
? top:0;
? font-size:14px;
? height:90rpx;
? line-height:90rpx;
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。