微信小程序--使用swiper实现滚动广告

上一篇就介绍了swiper这个视图的使用，不太清楚怎么使用，麻烦查看上一篇文章，

滚动的广告效果图如下，

1.index.js中：

//index.js
//获取应用实例
const app = getApp()Page({data: {nameList:['人生若只如初见', '何事秋风悲画扇', '等闲变却故人心','却道故人心易变!']},onLoad: function () {},})

2.index.wxml中：

<swiper class='swiper' indicator-dots="{{false}}" autoplay="false" current="0" interval="2000" duration="500" circular="true" vertical="true"><block wx:for="{{nameList}}" wx:key="nameKey"><swiper-item><view class='view'>{{item}}</view></swiper-item></block>
</swiper><swiper class='swiper' indicator-dots="{{false}}" autoplay="false" current="0" interval="2000" duration="800" circular="true" vertical="{{false}}"><block wx:for="{{nameList}}" wx:key="nameKey"><swiper-item><view class='view'>{{item}}</view></swiper-item></block>
</swiper>

3.index.wxss中：

.swiper {background-color: #ccc;height: 120rpx;margin-top: 40rpx;
}.view {padding-left: 20rpx;top: 25%;position: absolute;
}

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！

微信小程序--使用swiper实现滚动广告相关推荐

JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
java滚动字幕的实现的实训_微信小程序实现自上而下字幕滚动
本文实例为大家分享了微信小程序实现字幕滚动的具体代码,供大家参考,具体内容如下需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: 第一种方法: 经查询,最一开始实现字幕滚动是使用的微信小程序 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序如何接入视频激励广告
微信小程序如何接入视频激励广告这篇文章是以为自己发现流量主并没有什么流量,看广告极大的影响了使用体验,故而完全去掉了视频激励广告的代码,代码就放到博客里面吃灰吧哈哈哈文章目录微信小程序如何接入视 ...
微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换先放一张效果图需要实现的功能逻辑: 1.当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变. 2.当用户滑 ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
微信小程序 -- 通知消息横向滚动 -- 无缝连接1
微信小程序 – 通知消息横向滚动 – 无缝连接1 wxml <view class="notice"><view class="left"&g ...

微信小程序--使用swiper实现滚动广告

微信小程序--使用swiper实现滚动广告相关推荐

最新文章

热门文章