中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

微信小程序開發頁面如何添加文字自動滾動

小新
147
2020-12-10 08:36:27
欄目: 云計算

微信小程序開發頁面如何添加文字自動滾動

微信小程序開發頁面添加文字自動滾動的案例:

通過控制滑動條來完成文字滾動,通過setinterval完成文字循環滾動。

在對應的wxml文件中添加以下代碼:

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

  <view class='list'>

    <view class='blank'></view>

    <view>

      <text class="txt-light">09:08</text> 很多人的一生,基本都是自己跟別人較勁,比如別人對自己的期待,比如把別人看得太重把自己看得太輕。其實一個人最應該考慮的問題是,自己如何與自己相處,比如人去樓空的時候如何照顧好自己的孤獨,比如夜深人靜的時候如何跟心靈溝通。自己跟自己能和諧共處,自己跟別人就能相安無事。

    </view>

    <view>

      <text class="txt-light">19:08</text> 平和是待人處事的一種態度,也是做人酌一種美德。平和既是一種修養,又是一種工作方法。平和的人,從不被忙碌所縈繞,閑時吃緊,忙里悠閑。待人不嚴,教人勿高。寬嚴得宜,分寸得體。身心自在,能享受生活之樂趣。平和的人生,是和諧的人生,健康的人生。

    </view>

    <view class='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的節點信息

    //創建節點選擇器

    var query = wx.createSelectorQuery();

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

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

    query.exec((res) => {

      var containerHeight = res[0].height;

      var listHeight = res[1].height; 

      // 滾動條的高度增加

      var interval = 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的節點信息

    //創建節點選擇器

    var query = wx.createSelectorQuery();

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

    query.exec((res) => {

      this.setData({

        scrollTop: -(res[0].top)

      })

      // console.log(res);

    })

  }

})

0
称多县| 玛沁县| 涞水县| 吉安市| 永仁县| 泾川县| 雷山县| 黎川县| 颍上县| 清水河县| 桃园市| 修水县| 温宿县| 岳西县| 平果县| 礼泉县| 博客| 江西省| 自贡市| 玛多县| 赣榆县| 周口市| 临泉县| 滨海县| 奉贤区| 孟津县| 芜湖市| 丹东市| 龙海市| 阿鲁科尔沁旗| 荃湾区| 海丰县| 珠海市| 寿宁县| 聂荣县| 资中县| 石家庄市| 禄丰县| 高邑县| 平武县| 维西|