微信小程序swiper实现文字纵向轮播提示效果


Posted in Javascript onJanuary 21, 2020

摘要

小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是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实现文字纵向轮播提示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 模拟点击广告
Jan 02 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
javascript相关事件的几个概念
May 21 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
javascript实现移动端红包雨页面
Jun 23 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 #jQuery
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 #Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 #Javascript
微信小程序图片自适应实现解析
Jan 21 #Javascript
微信小程序button标签open-type属性原理解析
Jan 21 #Javascript
Vue实现兄弟组件间的联动效果
Jan 21 #Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 #Javascript
You might like
php调用Google translate_tts api实现代码
2013/08/07 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
javascript中new关键字详解
2015/12/14 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python定向爬取淘宝商品价格
2018/02/27 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
班级聚会策划书
2014/01/16 职场文书
日化店促销方案
2014/03/26 职场文书
献爱心倡议书
2014/04/14 职场文书
《云房子》教学反思
2014/04/20 职场文书
给校长的建议书500字
2014/05/15 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
Nginx HTTP跳转至HTTPS
2022/05/15 Servers