拐角型布局网站,wordpress 加logo,网站建设评估,青海西宁制作网站公司小程序、vue 新闻上下轮播vue小程序红色部分#xff1a;相当于放映机#xff0c;也就是容器#xff0c;overflow#xff1a;hidden绿色内容#xff1a;相当于胶片#xff0c;也就是domvue
vue的核心之一#xff0c;数据驱动模版#xff0c;循环播放映射的数据上就是 […
小程序、vue 新闻上下轮播vue小程序红色部分相当于放映机也就是容器overflowhidden绿色内容相当于胶片也就是domvue
vue的核心之一数据驱动模版循环播放映射的数据上就是 [1,2,3,4,5,6] —》[2,3,4,5,6,1] —》 [3,4,5,6,1,2]
动画是数据调整一次就执行一次
ul :class{comm__qa-transitoin:animate}li v-foritem in list :keyitem.title{{item.title}}/li
/uldata() {return {list: [{title: 1哈哈哈},{title: 2哈哈哈},{title: 3哈哈哈},],animate: false,}
},
created() {setInterval(this.showMarquee, 3000)
},
methods: {/*** 数据驱动模版循环播放映射*/showMarquee: function () {this.animate true;setTimeout( () {// //先加一个到尾巴然后去个头this.list.push(this.list[0]);this.list.shift();this.animate false;}, 500)},
}ul{height: 0.64rem;overflow: hidden;
}
li{height: 0.64rem;
}
.comm__qa-transitoin {transition: all 0.5s;margin-top: -0.64rem;
}小程序
利用小程序原声组件swiper方向设置为纵向 vertical‘true’设置同时显示的滑块数量display-multiple-items‘4’设置自动轮播autoplay‘true’ swiper classcomm__qa-ul verticaltrue autoplaytrue circulartrue interval2000 display-multiple-items1swiper-item wx:for{{list}} wx:for-itemitem wx:for-indexidx wx:keyidxview classcomm__qa-li{{item.title}}/view/swiper-item/swiper.comm__qa-ul{height: 64rpx;overflow: hidden;
}
.comm__qa-li{height: 64rpx;
}data: {list: [{title: 1哈哈哈},{title: 2哈哈哈},{title: 3哈哈哈},],},
