微信小程序实现跑马灯效果完整代码(附效果图)


Posted in Javascript onMay 30, 2018

一:功能介绍及讲解

实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮,按钮绑定当前的跑马灯信息的id,点击按钮后根据id跳转到相应的文章详情页;

这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前信息的数组下标,实现了动态改变查看按钮绑定信息id值的效果;

如果还有不懂的地方欢迎加入(173683895)微信小程序开发交流群。

二:效果图:

微信小程序实现跑马灯效果完整代码(附效果图)

三:完整源码

1.封装成一个组件:

<!-- //滚动 --> 
<template name="roll"> 
 <block> 
   <navigator url='../details/details2/detail2?artical_id={{newsId}}'> 
    <view class='chakan'>查看</view> 
   </navigator> 
  <view class='sx_lunbo page_row'> 
   <text class='red'>公告</text> 
   <swiper class='sx_swiper page_row' autoplay interval="5000" duration="3000" bindchange="newsId" data-newsId='{{item.id}}' circular> 
    <swiper-item wx:for="{{news}}" wx:key=""> 
     <view class='reds'>{{item.title}} 
     </view> 
    </swiper-item> 
   </swiper> 
  </view> 
 </block> 
</template>
.sx_lunbo { 
 width: 100%; 
 height: 60rpx; 
 border-bottom: solid 1px #eee; 
} 
.chakan{ 
 padding-left: 25rpx; 
 right: 20rpx; 
 clear: both; 
 position:absolute;  
 height: 40rpx; 
 margin-top: 10rpx; 
 color: #f63; 
 border:solid 1px #f63; 
 border-radius:5rpx; 
 padding: 0rpx 10rpx 0rpx 10rpx; 
 font-size: 28rpx 
} 
.sx_swiper { 
 width: 550rpx; 
 margin-top: 10rpx; 
} 
.sx_swiper swiper-item{ 
  height: 40rpx 
 } 
.reds { 
 overflow: hidden; 
 text-overflow: ellipsis; 
 white-space:nowrap; 
 width:500rpx; 
 font-size: 28rpx; 
 height: 40rpx; 
} 
.red { 
 font-size: 24rpx; 
 color: white; 
 width: 60rpx; 
 height: 40rpx; 
 line-height: 40rpx; 
 background: blue; 
 padding-left: 10rpx; 
 margin: 10rpx; 
 border-radius: 10rpx; 
}

2.在页面调用:

<import src="../template/roll/roll.wxml" /> 
<template is="roll" data="{{news,newsId}}" />
@import "../template/roll/roll.wxss";
newsId: function (e) { 
 var that = this 
 var item = e.detail.current; 
 this.setData({ 
  newsId:that.data.news[item].id 
 }) 
},

3.news的数据:

微信小程序实现跑马灯效果完整代码(附效果图)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vue通过点击事件读取音频文件的方法
May 30 #Javascript
vue 表单输入格式化中文输入法异常问题
May 30 #Javascript
详解如何使用babel进行es6文件的编译
May 29 #Javascript
基于打包工具Webpack进行项目开发实例
May 29 #Javascript
JavaScript反射与依赖注入实例详解
May 29 #Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 #Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 #Javascript
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
Open and Print a Word Document
2007/06/15 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python 支付整合开发包的实现
2019/01/23 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
python中如何写类
2020/06/29 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
教师岗位职责范本
2013/12/29 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
超市促销活动总结
2014/07/01 职场文书
踏青活动策划方案
2014/08/19 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
工作时间证明
2015/06/15 职场文书