微信小程序自定义轮播图(常用四种效果)
此功能视频教程请点击链接：http://school.jisuapp.cn/courses/143-14.html微信小程序自定义轮播图,效果跟pc的轮播图一样.共4种常用效果.
效果一(颜色效果):
效果二(数字效果):
效果三(数字效果):
效果四(标题效果):
xml代码:
<view class="swiper">
<swiper indicator-dots="{{is_dots}}" autoplay="true" current="{{swiperCurrent}}" interval="5000" duration="600" bindchange="swiperChange">
<block wx:for="{{img_data}}">
<swiper-item>
<image src="{{item.img_url}}" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
<view class="dots" wx:if="{{swiper_style == 1}}">
<block wx:for="{{img_data}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
<view class="dots_two" wx:if="{{swiper_style == 2}}">
<block wx:for="{{img_data}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}">{{index+1}}</view>
</block>
</view>
<view class="dots_three" wx:if="{{swiper_style == 3}}">
<view class="dot">{{swiperCurrent+1}}/{{swiper_data_num}}</view>
</view>
<view class="dots_four" wx:if="{{swiper_style == 4}}">
<block wx:for="{{img_data}}" wx:for-item="ditem">
<view class="dot" wx:if="{{index==swiperCurrent}}">{{ditem.title}}</view>
</block>
</view>
</view>
<view class="container">
<button type="primary" bindtap="chang_swiper_style" id="1">轮播图效果一(颜色)</button>
<button type="primary" bindtap="chang_swiper_style" id="2">轮播图效果二(数字)</button>
<button type="primary" bindtap="chang_swiper_style" id="3">轮播图效果三(数字二)</button>
<button type="primary" bindtap="chang_swiper_style" id="4">轮播图效果四(标题)</button>
</view>
JS代码:
var app = getApp();
Page({
data: {
img_data:[
{
"title":"图片一",
"img_url":"https://img.alicdn.com/simba/img/TB1B1uBRVXXXXcCaXXXSutbFXXX.jpg",
},
{
"title": "图片二",
"img_url": "https://img.alicdn.com/simba/img/TB19IBHQVXXXXaQXXXXSutbFXXX.jpg"
},
{
"title": "图片三",
"img_url": "https://img.alicdn.com/tfs/TB134OnRVXXXXabXXXXXXXXXXXX-520-280.jpg"
},
{
"title": "图片四",
"img_url": "https://img.alicdn.com/simba/img/TB1gctlRpXXXXcmXpXXSutbFXXX.jpg"
},
{
"title": "图片五",
"img_url": "https://img.alicdn.com/tfs/TB1CyKfRVXXXXbqXXXXXXXXXXXX-520-280.jpg"
}
],
is_dots:true,
swiper_data_num:0,
swiperCurrent: 0,
swiper_style:1
},
onLoad:function(){
this.setData({ swiper_data_num: this.data.img_data.length});
},
swiperChange: function (e) {
this.setData({swiperCurrent: e.detail.current});
},
//改变轮播图样式
chang_swiper_style:function(e){
var s_id = e.currentTarget.id;
if (s_id == 2 || s_id == 3 || s_id == 4){
this.setData({ is_dots: false });
} else if (s_id == 1){
this.setData({ is_dots: true });
}
this.setData({ swiper_style: s_id});
}
})
项目下载：
**** Hidden Message *****
谢谢分享资源:loveliness: 谢谢分享资源 我有流量，寻求个人游戏开发者合作，有意者联系微,信,号j i m 2 0 1 8 0 6 8 8
页:
[1]