微信小程序实现跑马灯（文字+图片）

参考链接：
（1）详解微信小程序实现跑马灯效果（附完整代码）
https://www.jb51.net/article/160412.htm
（2）初学者微信小程序—实现图片轮播效果
https://blog.csdn.net/qq_42594368/article/details/88659743
（3）微信小程序-使用swiper和css实现卡牌左右滑动切换、翻牌效果
https://blog.csdn.net/vinos_toby/article/details/90669406
（4）微信小程序实现卡片左右滑动效果的示例代码
https://www.jb51.net/article/160569.htm

一、文字跑马灯

在微信小程序里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的CSS样式控制，没用到JS，效果如下图：

wxml文件

<!--跑马灯 Linyufan.com-->
<view class="marquee_container" style="--marqueeWidth--:-12em"><view class="marquee_text">一个人活着就是为了让更多的人更好的活着！</view>
</view>
<!--跑马灯-->

wxss文件

/*首页跑马灯效果*/
@keyframes around {from {margin-left: 100%;}to {/* var接受传入的变量 */margin-left: var(--marqueeWidth--);}}
.marquee_container{background-color: #fe4655;height: 50rpx;line-height: 44rpx;position: relative;width: 100%;margin-top:0rpx;
}
.marquee_container:hover{/* 不起作用 */animation-play-state: paused;
}
.marquee_text{color:#fff;font-size: 28rpx;display: inline-block;white-space: nowrap;animation-name: around;animation-duration: 10s; /*过渡时间*/animation-iteration-count: infinite;animation-timing-function:linear;
}
/*首页跑马灯效果*/

二、图片轮播图/图片跑马灯

效果图

wxml文件

<!--轮播图-->
<view><swiper class='lunbo' indicator-dots='true' autoplay='true' interval='4000'><swiper-item> <image src='../images/a.jpg'></image> </swiper-item><swiper-item> <image src='../images/b.jpg'></image></swiper-item><swiper-item> <image src='../images/c.jpg'></image> </swiper-item></swiper>
</view>

注：参数详解

wxss文件

.lunbo{width:100%
}
.lunbo image{width:100%
}

三、卡片左右滑动切换、翻牌效果

效果图（演示视频效果见 https://www.duoguyu.com/smart/27.html）

滑块功能：使用了微信小程序组件-滑块视图容器 Swiper (查看官方文档)。

翻牌旋转效果：使用了Css3的一些属性：perspective、backface-visibility、transform等（参考链接：《Css3实现翻牌效果》DEMO源码 https://www.jq22.com/webqd4252?v=duoguyu.com）

perspective:3000rpx;  /*perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。*/
backface-visibility:hidden;  /*背对屏幕时隐藏*/
transform-style: preserve-3d;  /*子元素将保留其3D位置。*/
transform:rotateY(180deg);  /*定义沿着Y轴的3D旋转。*/

源码Demo下载地址：https://www.duoguyu.com/smart/27.html

四、卡片左右滑动

效果图

思路
从上面的效果图来看，基本的需求包括：
左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。
卡片滑动的时候有一定的加速度。
如果滑动距离太小，则依旧停留在当前卡片，而且有一个回弹的效果。
看到这样的需求，不熟悉小程序的同学，可能感觉有点麻烦。首先需要计算卡片的位置，然后再设置滚动条的位置，使其滚动到指定的位置，而且在滚动的过程中，加上一点加速度…

然而，当你查看了小程序的开发文档之后，就会发现小程序已经帮我们提前写好了，我们只要做相关的设置就行。

实现
滚动视图：左右滑动，其实就是水平方向上的滚动。小程序给我们提供了scroll-view组件，我们可以通过设置scroll-x属性使其横向滚动。
关键属性
在scroll-view组件属性列表中，我们发现了两个关键的属性：

属性	类型	说明
scroll-into-view	string	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	boolean	在设置滚动条位置时使用动画过渡

有了以上这两个属性，我们就很好办事了。只要让每个卡片独占一页，同时设置元素的ID，就可以很简单的实现翻页效果了。

左滑右滑判断
这里，我们通过触摸的开始位置和结束位置来决定滑动方向。
微信小程序给我们提供了touchstart以及touchend事件，我们可以通过判断开始和结束的时候的横坐标来判断方向。

wxml文件

<scroll-view class="scroll-box" scroll-x scroll-with-animationscroll-into-view="{{toView}}"bindtouchstart="touchStart"bindtouchend="touchEnd"><view wx:for="{{list}}" wx:key="{{item}}" class="card-box" id="card_{{index}}"><view class="card"><text>{{item}}</text></view></view>
</scroll-view>

wxss文件

page{overflow: hidden;background: #0D1740;
}
.scroll-box{white-space: nowrap;height: 105vh;
}.card-box{display: inline-block;
}.card{display: flex;justify-content: center;align-items: center;box-sizing: border-box;height: 80vh;width: 80vw;margin: 5vh 10vw;font-size: 40px;background: #F8F2DC;border-radius: 4px;
}

js文件

const DEFAULT_PAGE = 0;Page({startPageX: 0,currentView: DEFAULT_PAGE,data: {toView: `card_${DEFAULT_PAGE}`,list: ['Javascript', 'Typescript', 'Java', 'PHP', 'Go']},touchStart(e) {this.startPageX = e.changedTouches[0].pageX;},touchEnd(e) {const moveX = e.changedTouches[0].pageX - this.startPageX;const maxPage = this.data.list.length - 1;if (Math.abs(moveX) >= 150){if (moveX > 0) {this.currentView = this.currentView !== 0 ? this.currentView - 1 : 0;} else {this.currentView = this.currentView !== maxPage ? this.currentView + 1 : maxPage;}}this.setData({toView: `card_${this.currentView}`});}
})

json文件

{"navigationBarTitleText": "卡片滑动","backgroundColor": "#0D1740","navigationBarBackgroundColor": "#0D1740","navigationBarTextStyle": "white"
}