微信小程序实现轮播图标题跑马灯

本文实例为大家分享了微信小程序实现轮播图标题跑马灯的具体代码,供大家参考,具体内容如下

微信小程序做轮播图,轮播图下的标题如果不长不需要跑马灯效果,过长的无法显示全的则添加跑马灯效果

<swiper class="swiper" current="0" bindchange="onSlideChange">
    <swiper-item wx:for='{{carouselImgArr}}' wx:key='index'>
      <image 
          src='{{item.image}}' 
          mode='heightFix'
          class="swiper-item-img">
      </image>
      <view class="swiper-item-tit" wx:if='{{item.title}}'>
        <view class="swiper-tit-inner {{(currImgIndex - 1) == index ? 'active' : ''}}" 
              style='transform:translate({{ ((currImgIndex - 1) == index ? carouselTitLeft : 0) + "px" }})'>
          {{item.title}}
        </view>
      </view>
    </swiper-item>
</swiper>
.swiper{
  position: relative;
  height: 430rpx;
  padding: 0px;
  margin: 0px;
}
.swiper image{
  height: 430rpx;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.swiper-item-tit{
  position: absolute;
  bottom: 0rpx;
  left:0rpx;
  z-index: 2;
  height: 80rpx;
  line-height: 80rpx;
  color:#fff;
  width:100%;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  background-color: rgba(0,0,0,0.5);
}
.swiper-item-tit .swiper-tit-inner{
  text-align: center;
  white-space: nowrap;
} 
data: {
    carouselImgArr: [{
        image:'../../image/1.png',title:'标题',
    },{
        image:'../../image/1.png',title:'标题标题标题标题标题标题标题标题标题',
    },{
        image:'../../image/1.png',title:'标题',
    } ],
    carouselTitleLength:[2,18,2],// 轮播图标题的文字长度
    carouselTitLeft:0,
    currImgIndex: 1,
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
onSlideChange(e) {
    this.setData({
      currImgIndex: e.detail.current + 1,
      carouselTitLeft: 0
    });
    this.initMarqueen();
  },
  initMarqueen() {
    clearInterval(marqueenTimer);
    var self = this;
    var boxWidth,textWidth;
    var query = wx.createSelectorQuery();
    // query.select('.swiper-item-tit').fields({size:true},function(res){
    //   boxWidth = res.width;
    // }).exec();
    // query.select('.active').fields({size:true},function(res){
    //   textWidth = res.width;
    // }).exec();
    setTimeout(function(){
      let boxWidth = self.data.windowWidth;// 屏幕尺寸宽等于字体box宽,所以这里用屏幕宽替代了query获取的宽
      let scale = boxWidth / 375;// 以屏幕尺寸为375为标准(375下字体宽约为14),根据屏幕尺寸计算单个字体的宽度
    // 不知道为什么用query 获取的textWidth始终等于boxWidth的宽度,不得已只能使用文字长度乘以文字宽度来计算boxWidth。而
      let textWidth = self.data.carouselTitleLength[self.data.currImgIndex - 1] * (14*scale);
      console.log(scale,boxWidth,textWidth);
      if (textWidth - 3*scale > boxWidth) {// 减去3*scale防止textWidth只多出来一点点导致文字左右震荡
        let stayTime = 1000;
        let endStay = true;
        marqueenTimer = setInterval(function(){
          let currLeft = self.data.carouselTitLeft;
          if (stayTime !== 0) {
            stayTime = stayTime - 30;
            console.log('stay')
          } else if (currLeft > boxWidth - textWidth) {
            self.setData({
              carouselTitLeft: currLeft - 2
            });
          } else {
            if (endStay) {// 跑马灯结尾停留1s;
              endStay = false;
              stayTime = 1200;
              return;
            }
            self.setData({
              carouselTitLeft: 0
            });
            stayTime = 1200;// 回到跑马灯开头再停留1s;
            endStay = true;
          }
        },100)
      }
    },100);
  },

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

(0)

相关推荐

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

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

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

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

  • 微信小程序视图容器(swiper)组件创建轮播图

    本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档 二.swiper应用 1.页面逻辑(index.js) Page({ data: { imgUrls: [ { link: '/pages/index/index', url: '/images/001.jpg' }, { link: '/pages/list/list', url: '/images/002.jpg' }, { l

  • 微信小程序 轮播图swiper详解及实例(源码下载)

    微信小程序 swiper 轮播图 前言: 1.更新了v0.12的版本后,每次保存都弹出来一个打开文件窗口. 2.swiper组件的属性indicator-dots,值为false时,面板指示点还是显示.要把indicator-dots属性直接删掉. 下面进入正题:默认的swiper面板指示点都是小圆点黑灰的,但这满足不了广大小伙伴需求,比如其他颜色的,椭圆形的,方形的等等.... 首先当然是要禁用掉(直接删掉)swiper属性indicator-dots,再用view组件模拟dots,对应的代码

  • 微信小程序使用swiper组件实现类3D轮播图

    Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重新设置小圆点 circular 是否衔接滑动,就是实现无限

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

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

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

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

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

  • 微信小程序使用swiper组件实现层叠轮播图

    本文实例为大家分享了微信小程序实现层叠轮播图的具体代码,供大家参考,具体内容如下 wxml: <view class="banner-swiper"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' indicator-color="{{beforeColor}}" i

  • 微信小程序之swiper轮播图中的图片自适应高度的方法

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前屏幕宽度下swiper的高度. 1.结构 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}

随机推荐