• ADADADADAD

    微信小程序开发页面如何添加文字自动滚动[ 建站问答 ]

    建站问答 时间:2024-12-01 19:18:28

    作者:文/会员上传

    简介:

    微信小程序开发页面添加文字自动滚动的案例:通过控制滑动条来完成文字滚动,通过setinterval完成文字循环滚动。在对应的wxml文件中添加以下代码:<scroll-viewclass="container"

    以下为本文的正文内容,内容仅供参考!本站为公益性网站,复制本文以及下载DOC文档全部免费。

    微信小程序开发页面添加文字自动滚动的案例:

    通过控制滑动条来完成文字滚动,通过setinterval完成文字循环滚动。

    在对应的wxml文件中添加以下代码:

    <scroll-viewclass="container"scroll-y="true"bindscroll="scroll"scroll-top="{{scrollTop}}">

    <viewclass='list'>

    <viewclass='blank'></view>

    <view>

    <textclass="txt-light">09:08</text>很多人的一生,基本都是自己跟别人较劲,比如别人对自己的期待,比如把别人看得太重把自己看得太轻。其实一个人最应该考虑的问题是,自己如何与自己相处,比如人去楼空的时候如何照顾好自己的孤独,比如夜深人静的时候如何跟心灵沟通。自己跟自己能和谐共处,自己跟别人就能相安无事。

    </view>

    <view>

    <textclass="txt-light">19:08</text>平和是待人处事的一种态度,也是做人酌一种美德。平和既是一种修养,又是一种工作方法。平和的人,从不被忙碌所萦绕,闲时吃紧,忙里悠闲。待人不严,教人勿高。宽严得宜,分寸得体。身心自在,能享受生活之乐趣。平和的人生,是和谐的人生,健康的人生。

    </view>

    <viewclass='blank'></view>

    </view>

    </scroll-view>

    在对应的wxss文件中添加以下代码:

    .container{

    background-color:#FAEBD7;

    height:150rpx;

    }

    .txt-light{

    color:#acadbe;

    }

    .blank{

    height:150rpx;

    }

    在对应的js文件中添加以下代码:

    Page({

    /**

    *页面的初始数据

    */

    data:{

    scrollTop:0

    },

    /**

    *生命周期函数--监听页面加载

    */

    onLoad:function(options){

    },

    /**

    *生命周期函数--监听页面初次渲染完成

    */

    onReady:function(){

    },

    /**

    *生命周期函数--监听页面显示

    */

    onShow:function(){

    //获取scroll-view的节点信息

    //创建节点选择器

    varquery=wx.createSelectorQuery();

    query.select('.container').boundingClientRect()

    query.select('.list').boundingClientRect()

    query.exec((res)=>{

    varcontainerHeight=res[0].height;

    varlistHeight=res[1].height;

    //滚动条的高度增加

    varinterval=setInterval(()=>{

    if(this.data.scrollTop<listHeight-containerHeight){

    this.setData({

    scrollTop:this.data.scrollTop+10

    })

    }else{

    //clearInterval(interval);

    this.setData({

    scrollTop:0

    })

    }

    },1000)

    })

    },

    scroll:function(){

    //获取scroll-view的节点信息

    //创建节点选择器

    varquery=wx.createSelectorQuery();

    query.select('.list').boundingClientRect()

    query.exec((res)=>{

    this.setData({

    scrollTop:-(res[0].top)

    })

    //console.log(res);

    })

    }

    })

    微信小程序开发页面如何添加文字自动滚动.docx

    将本文的Word文档下载到电脑

    推荐度:

    下载