亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序左右滾動公告欄效果代碼實例

 更新時間:2019年09月16日 14:07:13   作者:執(zhí)著的小前端  
這篇文章主要介紹了微信小程序左右滾動公告欄效果代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

這篇文章主要介紹了微信小程序左右滾動公告欄效果代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

代碼如下

<view class='notice-wrap' hidden='{{hideNotice}}'>
  <view class='tongzhitext'>
    <text class="tongzhi-text">{{notice}}</text>
  </view>
  <view bindtap='switchNotice' class="closeView">x</view>
</view>
data: {
  //初始化數(shù)據(jù)
  hideNotice: false,
  notice: '',
}
// 點擊關(guān)閉公告
 switchNotice: function() {
  this.setData({
   hideNotice: true
  })
 },
@keyframes remindMessage {
 0% {
  -webkit-transform: translateX(90%);
 }

 100% {
  -webkit-transform: translateX(-180%);
 }
}

.tongzhitext {
 margin-right:80rpx;
 margin-left: 10rpx;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.tongzhi-text {
 font-size: 28rpx;
 animation: remindMessage 14s linear infinite;
 width: 100%;
 color: #d09868;
 display: block;
}

.notice-wrap {
 background: #ffebda;
 width: 100%;
 height: 60rpx;
 line-height: 60rpx;
 color: #d09868;
 font-size: 28rpx;
}

.closeView {
 width: 45rpx;
 height: 45rpx;
 line-height: 45rpx;
 position: absolute;
 right: 20rpx;
 top: 5rpx;
 text-align: center;
 font-size: 35rpx;
}

效果展示

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • OpenLayers實現(xiàn)點要素圖層的聚合顯示的方法

    OpenLayers實現(xiàn)點要素圖層的聚合顯示的方法

    在很多情況下,點要素圖層中的要素數(shù)量可能會成百上千,如果一個點要素圖層中的點數(shù)量很多,我們就會采取圖層聚合的方式對其進行處理,本文就來介紹一下,感興趣的可以了解一下
    2021-09-09
  • 原生javascript實現(xiàn)無間縫滾動示例

    原生javascript實現(xiàn)無間縫滾動示例

    原生javascript無間縫滾動目前支持的是豎向與橫向滾動,下面有個不錯的示例,大家可以參考下
    2014-01-01
  • 基于javascript實現(xiàn)貪吃蛇小游戲

    基于javascript實現(xiàn)貪吃蛇小游戲

    這篇文章主要介紹了基于javascript實現(xiàn)貪吃蛇小游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • JS基于HTML5的canvas標簽實現(xiàn)炫目的色相球動畫效果實例

    JS基于HTML5的canvas標簽實現(xiàn)炫目的色相球動畫效果實例

    這篇文章主要介紹了JS基于HTML5的canvas標簽實現(xiàn)色相球效果,結(jié)合實例形式分析了基于canvas標簽實現(xiàn)圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下
    2016-08-08
  • 微信小程序 高德地圖路線規(guī)劃實現(xiàn)過程詳解

    微信小程序 高德地圖路線規(guī)劃實現(xiàn)過程詳解

    這篇文章主要介紹了微信小程序 路線規(guī)劃實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-08-08
  • 超實用的javascript時間處理總結(jié)

    超實用的javascript時間處理總結(jié)

    在大家日常開發(fā)中常常會要對時間進行處理,以達到大家想要的效果,所以本文整理了一些javascript常用的時間處理類,有需要的可以參考借鑒。
    2016-08-08
  • javascript動態(tài)獲取登錄時間和在線時長

    javascript動態(tài)獲取登錄時間和在線時長

    這篇文章主要為大家詳細介紹了javascript動態(tài)獲取登錄時間和在線時長的相關(guān)資料,獲得登錄時候的時間,用來和動態(tài)的時間做差來求時長,感興趣的小伙伴們可以參考一下
    2016-02-02
  • 教你用typescript類型來推算斐波那契

    教你用typescript類型來推算斐波那契

    斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-01-01
  • javascript靜態(tài)的url如何傳遞

    javascript靜態(tài)的url如何傳遞

    javascript靜態(tài)的url如何傳遞...
    2007-05-05
  • MVVM框架下實現(xiàn)分頁功能示例

    MVVM框架下實現(xiàn)分頁功能示例

    分頁這種組件,幾乎每一種框架都有這樣的組件,這篇文章主要介紹了MVVM框架下實現(xiàn)分頁功能示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論