微信小程序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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
JS常用函数使用指南
Nov 23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
javascript遍历对象的五种方式实例代码
Oct 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python学生信息管理系统修改版
2018/03/13 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python ubplot使用方法解析
2020/01/10 Python
Python处理mysql特殊字符的问题
2020/03/02 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
成人成长感言如何写?
2019/08/16 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Python读写yaml文件
2022/03/20 Python