微信小程序swiper實現(xiàn)文字縱向輪播提示效果
更新時間：2020年01月21日 14:34:20 作者：玩爛小程序
這篇文章主要介紹了微信小程序swiper實現(xiàn)文字縱向輪播提示效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
摘要
小程序頂部總會看到滾動的通知欄，一般單條的都會用跑馬燈去實現(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)文章
JS也玩OO繼承...2007-01-01
JS 中LocalStorage和SessionStorage的使用
最近因為項目上需要使用到客戶端存儲,所以稍微研究了一下,以下說說自己的理解和使用經(jīng)驗，特此分享到腳本之家平臺，感興趣的朋友參考下吧2017-08-08
JavaScript設(shè)計模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之模板方法模式原理與用法,結(jié)合實例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-08-08
一些柱形圖在數(shù)據(jù)量比較多的時候,橫向排列受到擠壓,導(dǎo)致柱形圖,變的非常細,影響整體的效果,所以應(yīng)該將柱形圖堆疊起來,這樣就會好很多,下面這篇文章主要給大家介紹了關(guān)于Echarts橫向堆疊柱狀圖和markLine的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了JS實現(xiàn)給不同元素設(shè)置不同的定時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
兩個值相加精確指定位數(shù)在alert出來，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家詳細介紹了JavaScript仿京東輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
在開發(fā)過程中，為了應(yīng)對多變的復(fù)雜場景，我們需要了解一下?TypeScript?的高級類型。本文就為大家整理了一些需要掌握的TypeScript高級類型，需要的可以參考一下2022-08-08
這篇文章主要介紹了PHPExcel中的一些常用方法匯總,本文直接給出操作代碼實例,代碼中對常用方法給出了注釋,需要的朋友可以參考下2015-01-01
想做一個鏈接點擊后不做任何事情，方法有很多，不過不利于用戶體驗，javascript:void(0)可以有效解決這個問題2014-04-04