微信小程序-通知滾動小提示

代碼地址如下：
http://www.demodashi.com/demo/14044.html

一、前期准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。

• 我們在學習微信小程序或者做項目時，應該會遇到滾動通知效果情況，那么這個滾動通知功能我們應該怎么編寫呢？

• 今天我們說下微信小程序滾動通知效果的實現，今天我們就分享這樣的小教程。希望對大家有所幫助

2、案例目錄結構

二、程序實現具體步驟

1.滾動通知1的index.wxml代碼

<view> 顯示完后再顯示</view>
<view class="example">
  <view class="marquee_box">
    <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;">
      {{text}}
    </view>
  </view>
</view>
<view> 出現白邊后即顯示</view>
<view class="example">
  <view class="marquee_box">
    <view class="marquee_text" style="{{orientation}}:{{marqueeDistance2}}px;font-size: {{size}}px;">
      <text>{{text}}</text>
      <text wx:if="{{marquee2copy_status}}" style="margin-left:{{marquee2_margin}}px;">{{text}}</text>
    </view>
  </view>
</view>

2.滾動通知1的index.wxss代碼

.example {
  display: block;
  width: 100%;
  height: 100rpx;
}
.marquee_box {
  width: 100%;
  position: relative;
}
.marquee_text {
  white-space: nowrap;
  position: absolute;
  top: 0;
}

3.滾動通知1的index.js邏輯代碼

a.滾動通知1部分的功能實現

// pages/home/marquee/marquee.js
Page({
  data: {
    //略略略......
  },
  onShow: function () {
    // 頁面顯示
    var vm = this;
    var length = vm.data.text.length * vm.data.size;//文字長度
    var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度
    vm.setData({
      length: length,
      windowWidth: windowWidth,
      marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//當文字長度小於屏幕長度時，需要增加補白
    });
    vm.run1();// 水平一行字滾動完了再按照原來的方向滾動
    vm.run2();// 第一個字消失后立即從右邊出現
  },
  run1: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance < vm.data.length) {
        vm.setData({
          marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
        });
      } else {
        clearInterval(interval);
        vm.setData({
          marqueeDistance: vm.data.windowWidth
        });
        vm.run1();
      }
    }, vm.data.interval);
  },
  run2: function () {
    var vm = this;
    var interval = setInterval(function () {
      if (-vm.data.marqueeDistance2 < vm.data.length) {
        // 如果文字滾動到出現marquee2_margin=30px的白邊，就接着顯示
        vm.setData({
          marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
          marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
        });
      } else {
        if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 當第二條文字滾動到最左邊時
          vm.setData({
            marqueeDistance2: vm.data.marquee2_margin // 直接重新滾動
          });
          clearInterval(interval);
          vm.run2();
        } else {
          clearInterval(interval);
          vm.setData({
            marqueeDistance2: -vm.data.windowWidth
          });
          vm.run2();
        }
      }
    }, vm.data.interval);
  }
})

三、案例運行效果圖

四、總結與備注

暫無微信小程序-通知滾動小提示

代碼地址如下：
http://www.demodashi.com/demo/14044.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權