小程序、vue 新闻上下轮播

vue
小程序

红色部分：相当于放映机，也就是容器，overflow：hidden
绿色内容：相当于胶片，也就是dom

vue

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-for="item in list" :key="item.title">{{item.title}}</li>
</ul>

data() {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 class="comm__qa-ul" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'><swiper-item wx:for="{{list}}" wx:for-item="item" wx:for-index="idx" wx:key="idx"><view class="comm__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哈哈哈'},],},

小程序、vue 新闻上下轮播相关推荐

微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
后台和小程序实现卡片式轮播图
营销活动中,轮播图效果是比较常见的,基于轮播图拓展的组件也很多,这里记录一下使用swiper实现卡片式轮播的过程,分为PC端和小程序端,其中PC端是Vue+typescript,小程序端是uni-ap ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
小程序搜索词条单个轮播停留展示、信息栏多个词条循环滚动展示
效果展示小程序代码片段: https://developers.weixin.qq.com/s/ckLt13mr7pEg 搜索词条的单个轮播停留展示没什么难度,直接看小程序官方的swiper组件的示 ...
android分享小程序缩略图,微信小程序实现带缩略图轮播效果
本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码,供大家参考,具体内容如下 wxml: {{item.index+1}} wxss: /* pages/shouye/shouye.wxss ...

小程序、vue 新闻上下轮播

小程序、vue 新闻上下轮播

vue

小程序

小程序、vue 新闻上下轮播相关推荐

最新文章

热门文章