今天给大家带来微信小程序图片无缝3D轮播图循环模板制作设计教程,这个幻灯特点有3D效果。每个幻灯也支持文字描述说明,很实用。制作完毕以后效果图如下:
一、wxml页面代码如下:
<!-- index.wxml --> <scroll-view bindscroll="" scroll-y style="height: 100%;"> <!-- 活动详情界面 --> <swiper duration="300" interval="5000" autoplay="{{autoplay}}" bindchange="onSwiperChange" current="{{ curIndex }}" style="overflow: visible;"> <swiper-item wx:for="{{ postsShowSwiperList }}" style="overflow: visible;" wx:key="actpic"> <image src="{{ item.actPic }}" style="width: 100%; height: 300rpx; background: #fff; box-shadow: 0 10rpx 15rpx rgba(0, 0, 0, .1); -webkit-transform: scale({{ curIndex == index ? 0.9 : 0.65 }}) translate({{ (curIndex == index - 1 || curIndex == index + 1) ? (curIndex - index) * 30 : 0 }}%, 0); -webkit-transition: .3s; position: relative;" data-actid="{{item.id}}" data-pubid='{{item.publisherId}}' bindtap="click_activity" mode="aspectFill" /> <view class="horizontal"> <view class="tag recommend">最热活动</view> <text class="title">{{item.title}}</text> </view> </swiper-item> </swiper> </scroll-view> |
/**index.wxss**/ @import '/font.wxss'; page, input, textarea { font-family: "Microsoft YaHei UI", "PingFang SC", -apple-system-font; } page { margin: 0; padding: 0; background: #fff; text-align: center; overflow-x: hidden; } swiper { height: 380rpx; margin-bottom: 20rpx; } swiper-item, swiper-item image { width: 100%; height: 300rpx; border-radius: 15rpx; overflow: hidden; } .horizontal { display: inline; padding-top: 18rpx; padding-bottom: 10rpx; text-align: left; } .horizontal .tag { display: inline-block; background: #eee; color: #666; font-size: 28rpx; padding: 2rpx 10rpx; border-radius: 6rpx; margin-right: 10rpx; } .horizontal .recommend { border-radius: 10rpx; border: 3rpx solid #3688ff; background: #118fff; color: #fff; font-size: 23rpx; margin-left: 10rpx; margin-right: 20rpx; padding: 3rpx 10rpx; line-height: 1rem; } |
//wx-drawer var common = require('../../utils/common.js') var Bmob = require("../../utils/bmob.js"); var util = require('../../utils/util.js'); var app = getApp() var curIndex = 0 ; var that; const MENU_WIDTH_SCALE = 0.82; const FAST_SPEED_SECOND = 300; const FAST_SPEED_DISTANCE = 5; const FAST_SPEED_EFF_Y = 50; var my_nick = wx.getStorageSync('my_nick') var my_sex = wx.getStorageSync('my_sex') var my_avatar = wx.getStorageSync('my_avatar') Page({ data: { my_nick: my_nick, my_sex: my_sex, my_avatar: my_avatar, userInfo: [], dialog:false, autoplay:false, ui: { windowWidth: 0, menuWidth: 0, offsetLeft: 0, tStart: true }, buttonClicked: false, //是否点击跳转 //--------首页显示内容--------- postsList: [], //总的活动 postsShowSwiperList: [], //轮播图显示的活动 currentPage: 0, //要跳过查询的页数 limitPage: 3,//首先显示3条数据(之后加载时都增加3条数据,直到再次加载不够3条) isEmpty: false, //当前查询出来的数据是否为空 totalCount: 0, //总活动数量 endPage: 0, //最后一页加载多少条 totalPage: 0, //总页数 curIndex: 0, windowHeight1: 0, windowWidth1: 0, }, //首页切换图片 onSwiperChange:function(event) { curIndex = event.detail.current this.changeCurIndex() }, changeCurIndex:function(){ this.setData({ curIndex:curIndex }) }, onHide:function(){ this.setData({ autoplay:false }) }, //到地图模式 gotoMap:function(){ if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/showinmap/showinmap', }); } }, onLoad(t) { var self = this; //this.getAll(); //this.fetchTopThreePosts(); //获取轮播图的3篇文章 try { let res = wx.getSystemInfoSync() this.windowWidth = res.windowWidth; this.data.ui.menuWidth = this.windowWidth * MENU_WIDTH_SCALE; this.data.ui.offsetLeft = 0; this.data.ui.windowWidth = res.windowWidth; this.setData({ ui: this.data.ui }) } catch (e) { } }, onShow: function (e) { this.getAll(); this.fetchTopThreePosts(); //获取轮播图的3篇文章 //this.onLoad(); console.log('加载头像') var that = this app.getUserInfo(function (userInfo) { that.setData({ userInfo: userInfo }) }) wx.getSystemInfo({ success: (res) => { this.setData({ windowHeight1: res.windowHeight, windowWidth1: res.windowWidth, autoplay: true }) } }) }, //数据存储 onSetData: function (data) { console.log(data.length); let page = this.data.currentPage + 1; //设置数据 data = data || []; this.setData({ postsList: page === 1 || page === undefined ? data : this.data.postsList.concat(data), }); console.log(this.data.postsList, page); }, //获取总的活动数 getAll: function () { self = this; var Diary = Bmob.Object.extend("Events"); var query = new Bmob.Query(Diary); query.equalTo("isShow",1); //只统计公开显示的活动 query.count({ success: function (count) { var totalPage = 0; var endPage = 0; if (count % self.data.limitPage == 0) {//如果总数的为偶数 totalPage = parseInt(count / self.data.limitPage); } else { var lowPage = parseInt(count / self.data.limitPage); endPage = count - (lowPage * self.data.limitPage); totalPage = lowPage + 1; } self.setData({ totalCount: count, endPage: endPage, totalPage: totalPage }) console.log("共有" + count + " 条记录"); console.log("共有" + totalPage + "页"); console.log("最后一页加载" + endPage + "条"); }, }); }, //获取轮播图的文章,点赞数最多的前3个 fetchTopThreePosts: function () { var self = this; var molist = new Array(); var Diary = Bmob.Object.extend("Events"); var query = new Bmob.Query(Diary); query.equalTo("isShow", 1); //公开显示的 query.descending("likenum"); query.include("publisher"); query.limit(3); query.find({ success: function (results) { for (var i = 0; i < results.length; i++) { var publisherId = results[i].get("publisher").objectId; var title = results[i].get("title"); var content = results[i].get("content"); var acttype = results[i].get("acttype"); var isShow = results[i].get("isShow"); var endtime = results[i].get("endtime"); var address = results[i].get("address"); var addressdetail = results[i].get("addressdetail"); var peoplenum = results[i].get("peoplenum"); var likenum = results[i].get("likenum"); var liker = results[i].get("liker"); var isLike = 0; var commentnum = results[i].get("commentnum"); var id = results[i].id; var createdAt = results[i].createdAt; var pubtime = util.getDateDiff(createdAt); var _url var actpic = results[i].get("actpic"); if(actpic){ _url = results[i].get("actpic")._url; }else { _url = "http://bmob-cdn-14867.b0.upaiyun.com/2017/12/01/89a6eba340008dce801381c4550787e4.png"; } var publisherName = results[i].get("publisher").nickname; var publisherPic = results[i].get("publisher").userPic; var jsonA; jsonA = { "title": title || '', "content": content || '', "acttype": acttype || '', "isShow": isShow, "endtime": endtime || '', "address": address || '', "addressdetail": addressdetail || '', "peoplenum": peoplenum || '', "id": id || '', "publisherPic": publisherPic || '', "publisherName": publisherName || '', "publisherId": publisherId || '', "pubtime": pubtime || '', "actPic": _url || '', "likenum": likenum, "commentnum": commentnum, "is_liked": isLike || '' } molist.push(jsonA); } self.setData({ postsShowSwiperList: molist }) self.fetchPostsData(self.data); //加载首页信息 }, error: function (error) { console.log(error) } }) }, //-------------------------------------------------------------------------------------------------------- handlerStart(e) { let { clientX, clientY } = e.touches[0]; this.tapStartX = clientX; this.tapStartY = clientY; this.tapStartTime = e.timeStamp; this.startX = clientX; this.data.ui.tStart = true; this.setData({ ui: this.data.ui }) }, handlerMove(e) { let { clientX } = e.touches[0]; let { ui } = this.data; let offsetX = this.startX - clientX; this.startX = clientX; ui.offsetLeft -= offsetX; if (ui.offsetLeft <= 0) { ui.offsetLeft = 0; } else if (ui.offsetLeft >= ui.menuWidth) { ui.offsetLeft = ui.menuWidth; } this.setData({ ui: ui }) }, handlerCancel(e) { // console.log(e); }, handlerEnd(e) { this.data.ui.tStart = false; this.setData({ ui: this.data.ui }) let { ui } = this.data; let { clientX, clientY } = e.changedTouches[0]; let endTime = e.timeStamp; //快速滑动 if (endTime - this.tapStartTime <= FAST_SPEED_SECOND) { //向左 if (this.tapStartX - clientX > FAST_SPEED_DISTANCE) { ui.offsetLeft = 0; } else if (this.tapStartX - clientX < -FAST_SPEED_DISTANCE && Math.abs(this.tapStartY - clientY) < FAST_SPEED_EFF_Y) { ui.offsetLeft = ui.menuWidth; } else { if (ui.offsetLeft >= ui.menuWidth / 2) { ui.offsetLeft = ui.menuWidth; } else { ui.offsetLeft = 0; } } } else { if (ui.offsetLeft >= ui.menuWidth / 2) { ui.offsetLeft = ui.menuWidth; } else { ui.offsetLeft = 0; } } this.setData({ ui: ui }) }, handlerPageTap(e) { let { ui } = this.data; if (ui.offsetLeft != 0) { ui.offsetLeft = 0; this.setData({ ui: ui }) } }, handlerAvatarTap(e) { let { ui } = this.data; if (ui.offsetLeft == 0) { ui.offsetLeft = ui.menuWidth; this.setData({ ui: ui }) } }, }) //根据活动类型获取活动类型名称 function getTypeName(acttype) { var acttypeName = ""; if (acttype == 1) acttypeName = "运动"; else if (acttype == 2) acttypeName = "游戏"; else if (acttype == 3) acttypeName = "交友"; else if (acttype == 4) acttypeName = "旅行"; else if (acttype == 5) acttypeName = "读书"; else if (acttype == 6) acttypeName = "竞赛"; else if (acttype == 7) acttypeName = "电影"; else if (acttype == 8) acttypeName = "音乐"; else if (acttype == 9) acttypeName = "其他"; return acttypeName; } |
模板简介:该模板名称为【微信小程序图片无缝3D轮播图循环模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。