欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

摘要

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

效果

在這里插入圖片描述

體驗

在這里插入圖片描述

代碼

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: "公共號" },
   { title: "小程序" },
   { title: "音樂" },
   { title: "表情" },
   { title: "訂閱號" }]
 }
})

總結(jié)

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

相關(guān)文章

最新評論