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


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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JS实现批量上传文件并显示进度功能
Jun 27 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
May 03 Javascript
微信小程序仿通讯录功能
Apr 09 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分页函数
2006/07/08 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php curl_init函数用法
2014/01/31 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python实现二维数组的对角线遍历
2019/03/02 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
pytorch之添加BN的实现
2020/01/06 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
全球度假村:Club Med
2017/11/27 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
活动总结新闻稿
2014/08/30 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
Java 死锁解决方案
2022/05/11 Java/Android