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

一：功能介绍及讲解

实现的跑马灯（跑马灯里面显示文章的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的数据：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序实现文字跑马灯效果

    微信小程序实现文字跑马灯效果

    本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px

  • 微信小程序实现跑马灯效果

    微信小程序实现跑马灯效果

    网上很多实现跑马灯的文章,但是很多发现都是不行的,之一就是文字宽度居然是通过字符数*文字size计算,明显是不准确的计算方式.我看了下,发现可以通过计算控件宽度来精确计算文字宽度,这样实现的跑马灯是比较完善的. 效果如下: 实现代码如下: wxml: <view class="rollCon"> <view class='box'> <view class='text'style='left:{{offsetLeft}}px' >{{text}}&l

  • 微信小程序实现文字跑马灯

    前言 要实现跑马灯主要就是获得判断开始定界和结束定界, 1.9.3新增的wxml操作接口 就可以拿到节点长宽等属性,当然你也可以直接用 文字数量 * 文字大小(注意字体的单位px,rpx). 效果图 短字 长字 wxml <view class="content"> <text class="every" decode="{{true}}" style="right:{{announZf}}{{announNum}}p

  • 小程序文字跑马灯效果

    小程序文字跑马灯效果

    本文实例为大家分享了小程序文字跑马灯效果的具体代码,供大家参考,具体内容如下 market.wxml <!--pages/market/market.wxml--> <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style=&qu

  • 微信小程序实现简单跑马灯效果

    微信小程序实现简单跑马灯效果

    跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下! 跑马灯效果的制作 制作方式很简单,先方上代码,后面会对代码详细讲解 一.wxml界面的实现 <!-- 跑马灯效果 --> <view class="example"> <view class="marquee_box"> <view class="marque

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

    一:功能介绍及讲解 实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮,按钮绑定当前的跑马灯信息的id,点击按钮后根据id跳转到相应的文章详情页: 这里值得注意的点是我用了swiper组件的 bindchange 事件来获取到当前信息的数组下标,实现了动态改变查看按钮绑定信息id值的效果: 如果还有不懂的地方欢迎加入(173683895)微信小程序开发交流群. 二:效果图: 三:完整源码 1.封装成一个组件: <!-- //滚动 --> <template

  • 详解微信小程序实现跑马灯效果（附完整代码）

    详解微信小程序实现跑马灯效果（附完整代码）

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: <!--跑马灯 Linyufan.com--> <view class="marquee_container" style="--marqueeWidth--:-12em"> <view class="marquee_text">一个人活着就是为了让更多的人更好的活着!</v

  • 原生小程序封装跑马灯效果

    原生小程序封装跑马灯效果

    本文实例为大家分享了小程序封装跑马灯效果的具体代码,供大家参考,具体内容如下 Marquee.wxml <view class="marquee_container " style="background:{{broadcast_arr.back_color}};font-size:32rpx;"> <view class='marquee_text' style='--marqueeWidth--:{{-broadcast_arr.width_m

  • 小程序实现跑马灯效果

    小程序实现跑马灯效果

    本文实例为大家分享了小程序实现跑马灯效果的具体代码,供大家参考,具体内容如下 先看效果图 实现步骤: index.wxml文件 <!-- 跑马灯效果 --> <view class="example">   <view class="marquee_box">     <view class="marquee_text"            style="{{orientation}}:{{m

  • 微信小程序 特效菜单抽屉效果实例代码

    微信小程序 特效菜单抽屉效果实例代码

    实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 index.wxml <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onM

  • 微信小程序 实现tabs选项卡效果实例代码

    微信小程序 实现tabs选项卡效果实例代码

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断

  • 微信小程序实现鼠标拖动效果示例

    微信小程序实现鼠标拖动效果示例

    本文实例讲述了微信小程序实现鼠标拖动效果.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{left}}px;top:{{top}}px;" bindtouchmove="viewTouchMove" >使用鼠标拖动我</view> index.js文件 Page({ data:{ left:'', top:'' },

  • 微信小程序实现竖排slider效果

    本文实例为大家分享了微信小程序实现竖排slider效果的具体代码,供大家参考,具体内容如下 js: Component({   properties: {     blockColor: {       type: String,       value: "#ffffff"     },     blockSize: {       type: Number,       value: 28     },     backgroundColor: {       type: Stri

随机推荐