用spiwer容器写轮播图

swiper写轮播图，swiper是个滑块容器，indicator-dots生成小圆点，autoPlay自动切换，interval是切换的时间间隔，duration是动画的时长

<view class="contain"> <!--轮播图--> <swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper>

wxcss的样式

.home-swiper { width: 100%; height: 440rpx; } .slide-image { width: 100%; height: 100%; } /*图片大小自适应*/ image { width: 100%; vertical-align: top; display: block; }

js用于请求数据

data: { //轮播图配置 autoplay: true, interval: 3000, duration: 1200, imgUrls: [ "images/headImg2.png", "images/compute.png", "images/headImg2.png" ] },

文字向上滚动，加上vertical="true即可

<view class='gundong-section'> <image src="images/round-g.gif"></image> <view class="swiperview swiper-position"> <swiper class="swiperitem" indicator-dots="true" autoplay="{{autoplay}}" vertical="true" circular="true"> <block wx:for="{{rollData}}"> <swiper-item> <text class="swiper-txt">{{item}}</text> </swiper-item> </block> </swiper> </view> </view>

css部分

.gundong-section { position: relative; overflow: hidden; height: 80rpx; background-color: white; border-bottom: solid #f8f8f8 1px; } .gundong-section image { width: 50rpx; height: 50rpx; float: left; margin: 18rpx 0 0 15rpx; } .gundong-section .swiper-position { position: absolute; top: 0; left: 0; z-index: 2; height: 80rpx; width: 100%; overflow: hidden; } .swiperitem { height: 100%; margin-left: 2rem; } .swiperview .wx-swiper-dots { display: none; } .swiper-txt { font-size: 30rpx; color: #b0b0b0; line-height: 88rpx; }

js加载数据

var rollData = [ "139****2396在手机贷成功贷款5000元", "136****3365在信用贷成功贷款2000元", "159****9685在手机贷成功贷款3000元", "137****4867在农户贷成功贷款6000元", "156****5530在法人贷成功贷款9000元", "158****6940在保单贷成功贷款4000元", "153****3364在热门网贷成功贷款3000元", "157****2564在大学生创业贷款成功贷款10000元", "139****2396在手机贷成功贷款5000元", "136****3365在信用贷成功贷款2000元", "159****9685在手机贷成功贷款3000元", "137****4867在农户贷成功贷款6000元", "156****5530在法人贷成功贷款9000元", "158****6940在保单贷成功贷款4000元", "153****3364在热门网贷成功贷款3000元" ];

效果如下