微信小程序左右滾動公告欄效果代碼實例
更新時間:2019年09月16日 14:07:13 作者:執(zhí)著的小前端
這篇文章主要介紹了微信小程序左右滾動公告欄效果代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序左右滾動公告欄效果代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
代碼如下
<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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
利用uniapp開發(fā)APP時的調(diào)試/安卓打包等詳解
uni-app??是一個使用??Vue.js開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于利用uniapp開發(fā)APP時的調(diào)試/安卓打包等的相關(guān)資料,需要的朋友可以參考下2022-12-12
JavaScript數(shù)據(jù)可視化:ECharts制作地圖
這篇文章主要介紹了Echarts實現(xiàn)可視化地圖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-08-08
js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細介紹了js實現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
基于JavaScript實現(xiàn)快速轉(zhuǎn)換文本語言(繁體中文和簡體中文)
這篇文章主要介紹了基于JavaScript實現(xiàn)快速切換正體中文和簡體中文,需要的朋友可以參考下2016-03-03
利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼
這篇文章主要介紹了利用js實現(xiàn)Ajax并發(fā)請求限制請求數(shù)量的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-04-04

