上一篇就介绍了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;
}
本人菜鸟一个,有什么不对的地方希望大家指出评论,大神勿喷,希望大家一起学习进步!