广州网站推广策划案,浙江搜索引擎优化,大学生网站设计作业动画,wordpress雪人主题2.0背景#xff1a; 微信小程序中列表宽度不够长#xff0c;其中某字段显示不完整#xff0c;因此要使其自动滚动。 #xff08;最初看网上很多用定时器实现#xff0c;但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表#xff0c;…背景 微信小程序中列表宽度不够长其中某字段显示不完整因此要使其自动滚动。 最初看网上很多用定时器实现但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表如果设置定时器性能耗费太大因此只用css实现
样例图
我这里是列表轮播 商品名称字段左右滚动 微信小程序轮播组件swiper有个坑display-multiple-items设置的值如果大于列表长度内容将无法显示
这里主要记录文本横向 无缝 滚动
先说思路使用css动画让文本向左移动
keyframes scrollText {0% {transform: translateX(0%);}100% {transform: translateX(-100%);}
}此时有个问题不是 无缝 的文本将在右边出现大量空白在移动到末尾再突然出现 很难看 要处理这个问题在文本后面添加一个占位文本、当右边本为空白时 显示占位文本当一轮动画结束时第一个文本再覆盖占位文本视觉上就是无限的 无缝滚动 要让一轮动画结束完全覆盖占位文本 也很简单设置一个向左padding值
view classscroll-text-warptext classscroll-text style{{item.scrollStyle}} {{item.goods}} /texttext classscroll-text style{{item.scrollStyle}} {{item.goods}} /text/view.scroll-text {white-space: nowrap;display: inline-block;animation: scrollText 10s linear infinite;padding-left: 40rpx;
}
统一设置速率文案长短不一 用同样的动画时长会出现滚动速率不同
list.forEach((item) {console.log(item,item)const textLength item.goods.length;const animationDuration textLength * 0.5 s;item.scrollStyle animation: scrollText ${animationDuration} linear infinite;;});this.setData({list});总代码 wxml
view classfifth-warp card-bg styleheight: 500rpx;margin-top: 200rpx;view classtab-headertext classheader-item stylewidth: 180rpx;品牌/texttext classheader-item stylewidth: 200rpx;flex: 1;商品名称/texttext classheader-item stylewidth: 180rpx;排名/text/viewswiper verticaltrue autoplaytrue circulartrue interval2000 display-multiple-items{{list.length5?5:list.length}} styleheight: 350rpx;block wx:for-indexidx wx:for{{list}} wx:keyindexswiper-itemview classswiper-contenttext classcontent-item stylemin-width: 180rpx;{{item.brand}}/textview classscroll-text-warptext classscroll-text style{{item.scrollStyle}} {{item.goods}} /texttext classscroll-text style{{item.scrollStyle}} {{item.goods}} /text/viewtext classcontent-item stylemin-width: 180rpx;TOP{{item.rank}}/text/view/swiper-item/block/swiper
/viewwxss
.tab-header {width: 100%;display: flex;text-align: center;align-items: center;color: #BDBDBD;
}.header-item {font-size: 26rpx;padding: 20rpx 0 40rpx 0;
}.swiper-content {display: flex;
}.content-item {font-size: 24rpx;text-align: center;
}.scroll-text-warp {width: 100%;overflow: hidden;font-size: 24rpx;display: flex;
}.scroll-text {white-space: nowrap;display: inline-block;animation: scrollText 10s linear infinite;padding-left: 40rpx;
}keyframes scrollText {0% {transform: translateX(0%);/* 开始位置 */}100% {transform: translateX(-100%);/* 结束位置 */}
}js
const {dcApi_ljq} require(../../api/index.js);Component({options: {addGlobalClass: true},lifetimes: {attached: function () {this.getList();}},data: {list: []},methods: {getList() {let list [{brand: xxx1, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:1},{brand: xxx2, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:2},{brand: xxx3, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:3},{brand: xxx4, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:4},{brand: xxx5, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:5},{brand: xxx6, goods: 开始滚动区域滚动区域滚动区域滚动区域滚动区域结束,rank:6},];list.forEach((item) {console.log(item,item)const textLength item.goods.length;const animationDuration textLength * 0.5 s;item.scrollStyle animation: scrollText ${animationDuration} linear infinite;;});this.setData({list});}}
});
