快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)滾動條功能

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

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

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

view

<view class="conty">
? <!-- 滾動字幕 -->
<scroll-view class="container">
? <view class="scrolltxt">
? ? <view class="marquee_box">
? ? ? <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
? ? ? <text>{{text}}</text>
? ? ? <text style="margin-right:{{marquee_margin}}px;"></text>
? ? ? <text style="margin-right:{{marquee_margin}}px;">{{text}}</text> ?
? ? ? </view>
? ? </view>
? </view>
</scroll-view>
</view>

js

data: {
? text: "這是一條農(nóng)協(xié)動態(tài)，請您仔細(xì)閱讀，若內(nèi)容有所問題，請聯(lián)系客服！",
? marqueePace: 1,//滾動速度
? marqueeDistance: 0,//初始滾動距離
? 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;//滾動文字的寬度
? 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"});//只顯示一條不滾動右邊間距加大，防止重復(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: