操屁眼的视频在线免费看,日本在线综合一区二区,久久在线观看免费视频,欧美日韩精品久久综

微信小程序實現滾動條功能

本文為大家分享了微信小程序實現滾動條的具體代碼，供大家參考。

view

? 

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

? 

js

data: {
? text: "這是一條農協動態，請您仔細閱讀，若內容有所問題，請聯系客服！",
? marqueePace: 1,//滾動速度
? marqueeDistance: 0,//初始滾動距離
? marquee_margin: 30,
? size:14,
? interval: 20 ,// 時間間隔
? 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();// 第一個字消失后立即從右邊出現
? },
? ?
? 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"});//只顯示一條不滾動右邊間距加大，防止重復顯示
? }?
? }

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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助微信小程序設置滾動條，也希望大家多多支持編程寶庫。

下一節：微信小程序自定義用戶登錄彈窗JS 編程技術

本文為大家分享了微信小程序自定義用戶登錄彈窗的具體代碼微信小程序設置滾動條，供大家參考。view