微信小程序入門之廣告條實(shí)現(xiàn)方法示例
更新時(shí)間：2018年12月05日 12:01:35 作者：玩家296508754
這篇文章主要介紹了微信小程序入門之廣告條實(shí)現(xiàn)方法,涉及微信小程序基于swiper與navigator組件的文字信息滑動(dòng)展示相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了微信小程序入門之廣告條實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：
在小程序頁面，有時(shí)候需要弄一條廣告條進(jìn)去，作用可以用來提醒客戶端，更加醒目，這種實(shí)現(xiàn)很容易，要用到組件swiper,navigator
先上效果圖：
wxml:
<swiper class="swiper_container" autoplay="true" interval="2000" circular="true">
<block wx:for="{{msgList}}">
<navigator url="服務(wù)器" open-type="navigate">
<swiper-item>
<view class="swiper_item">{{item.title}}</view>
</swiper-item>
</navigator>
</block>
</swiper>
js:
Page({
data: {
msgList: [
{ url: "url", title: "公告１１：這是一條公告，效果是每個(gè)ｘ秒，會(huì)向右滑動(dòng)，" },
{ url: "url", title: "公告２２：這里是向右滑動(dòng)。。。。" },
{ url: "url", title: "公告３３：啊哈哈微信小程序，。。。" }
]
}
})
WXSS：
.swiper_container
{
background-color:rgb(255, 255, 255);
height:40px; //可以改變背景顏色（background-color)，或者字體顏色(color)
}
雖然這段代碼很容易理解， 但是這種效果是非常實(shí)用的
希望本文所述對大家微信小程序開發(fā)有所幫助。
相關(guān)文章
來自騰訊的一個(gè)不固定高度得消息的滾動(dòng)特效
8月最后1天，趕緊補(bǔ)篇博客。貼個(gè)最近看到的騰訊的特效，寫的還可以。先看效果。2010-09-09
這篇文章為大家詳細(xì)主要介紹了用JavaScript實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
大多數(shù)語言都提供了按位運(yùn)算符,恰當(dāng)?shù)氖褂冒次贿\(yùn)算符有時(shí)候會(huì)取得的很好的效果,下面這篇文章主要給大家介紹了關(guān)于JS中位運(yùn)算符的一些妙用,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
JavaScript開發(fā)時(shí)的五個(gè)注意事項(xiàng)
JavaScript開發(fā)時(shí)的五個(gè)注意事項(xiàng)講述了表單事件、鏈接、循環(huán)優(yōu)化、匿名函數(shù)、字符串連接等優(yōu)化技巧,需要的朋友可以參考一下2007-12-12
JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片上傳多次上傳同一張不生效的處理方法,處理方法也很簡單，只要在刪除方法里置空input，具體實(shí)例代碼大家參考下本文2018-08-08
Angularjs手動(dòng)解析表達(dá)式（$parse）
這篇文章主要介紹了Angularjs手動(dòng)解析表達(dá)式（$parse）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序左右滑動(dòng)刪除事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了開源的JavaScript插件化框架MinimaJS的詳解,詳細(xì)的介紹了MinimaJS的使用，具有一定的參考價(jià)值，有興趣的可以了解一下2017-10-10
javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果
這篇文章主要介紹了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法,以實(shí)例形式完整講述了javascript實(shí)現(xiàn)幻燈效果的javascript、css及html實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序上傳圖片到php服務(wù)器的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05