91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序swiper實現文字縱向輪播提示效果

發布時間:2020-08-24 17:26:30 來源:腳本之家 閱讀:444 作者:玩爛小程序 欄目:web開發

摘要

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

效果

微信小程序swiper實現文字縱向輪播提示效果

體驗

微信小程序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: "訂閱號" }]
 }
})

總結

以上所述是小編給大家介紹的微信小程序swiper實現文字縱向輪播提示效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

休宁县| 榕江县| 台安县| 湖南省| 城口县| 繁昌县| 鹿邑县| 丹东市| 贡嘎县| 长沙县| 乌兰县| 宁津县| 收藏| 汤阴县| 江城| 桐柏县| 龙里县| 锡林郭勒盟| 临武县| 曲阳县| 武乡县| 桐乡市| 永丰县| 松潘县| 曲周县| 中超| 柳林县| 河曲县| 抚顺市| 鞍山市| 买车| 峨眉山市| 汨罗市| 宝清县| 军事| 宜昌市| 南阳市| 翼城县| 潼关县| 扶沟县| 吴忠市|