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

微信小程序swiper實(shí)現(xiàn)文字縱向輪播提示效果

 更新時(shí)間：2020年01月21日 14:34:20   作者：玩爛小程序  
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)文字縱向輪播提示效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

摘要

小程序頂部總會(huì)看到滾動(dòng)的通知欄，一般單條的都會(huì)用跑馬燈去實(shí)現(xiàn)，但面對(duì)多條的內(nèi)容，就需要用輪播去實(shí)現(xiàn)，輪播自然是swiper了，查了查，還真有vertical這個(gè)屬性，swiper真好用。

效果

在這里插入圖片描述

體驗(yàn)

在這里插入圖片描述

代碼

wxml

<view class="swiper-view">
 <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
  <block wx:for="{{msgList}}">
   <swiper-item>
    <view class="swiper_item">{{item.title}}</view>
   </swiper-item>
  </block>
 </swiper>
</view>

wxss

.swiper-view{
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 border-radius: 5rpx;
 background: tomato
}

.swiper_container {
 height: 50rpx;
 width: 90%;
}

.swiper_item {
 height: 50rpx;
 width: 90%;
 font-size: 26rpx;
 white-space: nowrap;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 color: white
}

Page({
 data: {
  msgList: [
   { title: "朋友圈" },
   { title: "文章" },
   { title: "公共號(hào)" },
   { title: "小程序" },
   { title: "音樂(lè)" },
   { title: "表情" },
   { title: "訂閱號(hào)" }]
 }
})

總結(jié)

以上所述是小編給大家介紹的微信小程序swiper實(shí)現(xiàn)文字縱向輪播提示效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論