微信小程序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结合css实现网页换肤功能
Nov 02 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
php5中类的学习
2008/03/28 PHP
php adodb分页实现代码
2009/03/19 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php微信公众号开发之简答题
2018/10/20 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
Javascript模板技术
2007/04/27 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jQuery实现跨域
2015/02/03 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue2过滤器模糊查询方法
2018/09/16 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python 实现批量图片识别并翻译
2020/11/02 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
新闻专业个人自我评价
2013/09/21 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
高中班长自我鉴定
2013/12/20 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书