<!-- index.wxml --> <view class="mpage {{!ui.tStart? 'withAnimate': ''}}" style="left:{{ui.offsetLeft}}px;width: {{ui.windowWidth}}px;" bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" bindtap="handlerPageTap"> <scroll-view bindscroll="" scroll-y style="height: 100%;"> <view class="search"> <view catchtap="handlerAvatarTap" class="avatar"> <image src="{{userInfo.avatarUrl}}"></image> </view> <view class="search-wrapper {{show_search_back?'search-wrapper-blue':''}}"> <view class="search-button" bindtap="click_search"> <view class="iconfont icon-sousuo"></view> 搜索活动 </view> </view> <view bindtap='gotoMap' class="avatar_r"> <image src="/static/images/map7.png"></image> </view> </view> <!-- 活动详情界面 --> <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> <view class="activities"> <view class="subtitle"> <image src="/static/images/ic_activity.png" mode="aspectFit" /> <text>最新活动</text> <space/> <button bindtap="refresh">点击刷新</button> </view> <view class="activity" wx:for="{{postsList}}" wx:key="id"> <view class="list_header"> <view class="list_header_left"> <image mode="aspectFill" src="{{item.publisherPic}}" wx:if="publisherPic"></image> <view>{{item.publisherName}}</view> </view> <view class="content-date list_header_right"> <image src="/static/images/calendar.png"></image> <text>{{item.pubtime}}</text> <image src="/static/images/comments.png"></image> <text class="">{{item.commentnum}}</text> <image src="/static/images/home-like.png"></image> <text class="">{{item.likenum}}</text> </view> </view> <view class="horizontal"> <view class="tag tag_{{item.acttype}}">{{item.acttypename}}</view> <text class="title">{{ item.title }}</text> </view> <image mode="aspectFill" class="photo" src="{{item.actPic}}" wx:if="{{item.actPic}}" data-actid="{{item.id}}" data-pubid='{{item.publisherId}}' bindtap="click_activity"></image> <text class="intro">{{item.content}}</text> <text class="time">有效时间:{{ item.endtime }}</text> <text class="location">活动地点:{{ item.address }}</text> </view> </view> <view class="loadingmore"> <view wx:if="{{!isEmpty}}"> <button class="more-button" formType="submit" size="mini" bindtap="loadMore">加载更多...</button> </view> <view class="no-more" wx:if="{{isEmpty}}">---无更多活动---</view> </view> <tab-shadow/> </scroll-view> </view> <!-- 侧滑栏 --> <view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" class="user" style="width: {{ui.menuWidth}}px"> <view style="width: {{ui.menuWidth}}px;left:{{-ui.menuWidth/3 + ui.offsetLeft/3}}px" class="user-box {{!ui.tStart? 'withAnimate': ''}}"> <view class="user-face-wrapper"> <image mode="aspectFill" src="/static/images/icon/backGround.png" style="height: 150px" class="loginbg"></image> <image class="user-face" src="{{userInfo.avatarUrl}}"></image> <view class='user-info'> <text>{{userInfo.nickName}}</text> <image wx:if="{{userInfo.gender == 1}}" src="/static/images/m3.png"></image> <image wx:if="{{userInfo.gender == 2}}" src="/static/images/w3.png"></image> <image wx:if="{{userInfo.gender == 0 || userInfo.gender==''}}" src="/static/images/sex.png"></image> </view> </view> <view style='background-color: #fff;' class='bottom-box'> <view class="list-box"> <view class="icon-text"> <span>步数</span> </view> <text>2543</text> </view> <view class="list-box " bindtap=" "> <view class="icon-text "> <span>排名</span> </view> <text>21</text> </view> </view> <view class="thirdblock" style='margin-top:80px;'> <view class="itemself" bindtap="click_myLaunch" data-index="1"> <image src="/static/images/icon/times.png" class="itemself_ico"></image> <span>我的发起</span> </view> <view class="itemself" bindtap="click_myJoin" data-index="2"> <image src="/static/images/icon/jssq.png" class="itemself_ico"></image> <span>我的加入</span> </view> <view class="itemself" bindtap="click_myCollection" data-index="3"> <image src="/static/images/icon/status.png" class="itemself_ico"></image> <span>我的收藏</span> </view> <view class="itemself" bindtap="click_projectBrief" data-index="4"> <image src="/static/images/icon/specialty.png" class="itemself_ico"></image> <span>项目简介</span> </view> <view class="itemself" bindtap="click_Tick" data-index="5"> <image src="/static/images/icon/tick2.png " class="itemself_ico"></image> <span>反馈建议</span> </view> <view class="itemself" bindtap="click_more" data-index="6"> <image src="/static/images/icon/plus.png " class="itemself_ico"></image> <span>更多信息</span> </view> </view> <view class="h10"></view> <view class="h10"></view> </view> </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; } .mpage { z-index: 10; position: fixed; bottom: 0; top: 0; background-color: #fff; } .withAnimate { transition: all 300ms ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } .search { background: white; display: flex; align-items: center; } .search .avatar { padding: 20rpx 20rpx 0 20rpx; } .search .avatar_r { padding: 20rpx 20rpx 0 20rpx; float: right; } .search .avatar image { width: 50rpx; height: 50rpx; border-radius: 50%; margin-right: 40rpx; } .search .avatar_r image { width: 50rpx; height: 50rpx; border-radius: 50%; margin-right: 40rpx; margin-left: 530rpx; } .item { display: flex; align-items: center; justify-content: center; background: white; padding: 60rpx; border-bottom: 20rpx solid #dbdbdb; } .item image { height: 150rpx; width: 150rpx; border-radius: 50%; margin-right: 40rpx; } /*搜索*/ .search-wrapper { position: absolute; top: 0; left: 40px; padding: 20rpx 0; width: 75%; z-index: 1; background-color: white; } .search-button { margin: 0 auto; height: 25px; width: 100%; border-radius: 5px; background-color: whitesmoke; font-size: 13px; line-height: 26px; text-align: center; vertical-align: top; } .search-wrapper-blue { background-color: #1296db; } /*活动详情界面CSS*/ .list_header_left image { width: 60rpx; height: 60rpx; margin-right: 10rpx; float: left; border-radius: 40rpx; overflow: hidden; } .list_header view { float: left; line-height: 80rpx; color: #1e1e1e; font-size: 15px; } .list_header .list_header_right { float: right; } .list_header { overflow: hidden; border-bottom: 1rpx solid #f4f4f4; } /**/ swiper { height: 380rpx; margin-bottom: 20rpx; } swiper-item, swiper-item image { width: 100%; height: 300rpx; border-radius: 15rpx; overflow: hidden; } .activities .subtitle { padding: 20rpx 35rpx; border-top: 20rpx solid #f4f4f4; background: #fff; display: flex; flex-direction: row; align-items: center; justify-content: center; top: 0; z-index: 999; } .activities .subtitle image { width: 42rpx; height: 42rpx; margin-right: 30rpx; flex-shrink: 0; } .activities .subtitle text { font-size: 28rpx; color: #666; } .activities .subtitle button { border-radius: 50rpx; border: 3rpx solid #3688ff; background: transparent; color: #3688ff; font-size: 26rpx; margin-left: 20rpx; margin-right: 0; padding: 6rpx 20rpx; line-height: 1rem; } .activity { display: flex; flex-direction: column; align-items: stretch; padding: 0 0 35rpx; margin: 0 40rpx; border-bottom: 10rpx solid #f4f4f4; } .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; } .horizontal .tag_1 { background: #fe6c01; color: #fff; } .horizontal .tag_2 { background: #00cdab; color: #fff; } .horizontal .tag_3 { background: #0e53a6; color: #fff; } .horizontal .tag_4 { background: #1dd201; color: #fff; } .horizontal .tag_5 { background: #fec401; color: #fff; } .horizontal .tag_6 { background: #fe0701; color: #fff; } .horizontal .tag_7 { background: #0c5da5; color: #fff; } .horizontal .tag_8 { background: #e20149; color: #fff; } .horizontal .tag_9 { background: #a54a00; color: #fff; } .horizontal .title { font-size: 30rpx; color: #333; text-align: left; } .activity .photo { width: 100%; /* 670rpx */ height: 320rpx; box-shadow: 0 10rpx 15rpx rgba(0, 0, 0, 0.1); border-radius: 12rpx; overflow: hidden; margin: 10rpx 0; } .activity .intro { font-size: 28rpx; color: #666; padding: 10rpx 0; text-align: justify; } .activity .time { font-size: 28rpx; color: #999; text-align: justify; padding-top: 10rpx; } .activity .location { font-size: 28rpx; color: #999; text-align: justify; } .bottom-tip { display: block; padding: 40rpx 0; font-size: 28rpx; color: #999; text-align: center; } /*第二个侧滑页cSS*/ li { list-style: none; } html, body { width: 100%; min-height: 100%; background: #f0f0f0; } .h10 { background: #f0f0f0; } .h1 { height: 1px; margin-left: 50px; background: #f0f0f0; position: fixed; } .fr { float: right; } .hint { color: #666; font-size: 11px; margin-right: 5px; } .firstblock, .secondblock, .thirdblock { background-color: #fff; font-size: 16px; } /* 头部登陆 */ .loginbg { width: 100%; height: 416rpx; -webkit-filter: blur(2px); filter: blur(2px); position: relative; } /* 设置条目 */ .itemself { padding-bottom: 7.5px; padding-top: 7.5px; background-color: #fff; border-bottom: 1rpx solid rgb(230, 230, 230); margin-left: 25%; margin-right: 12.5%; } .itemself_ico { float: left; width: 20px; height: 20px; } .itemself_arrow { float: right; height: 26px; width: 26px; margin: 11px 20px; } .presshover { background-color: #fafafa; } .font_size { font-size: 16px; color: #333; } .bottom-box { width: 100%; text-align: center; } .list-box { width: 25%; float: left; border-bottom: 10rpx solid rgb(230, 230, 230); margin-left: 50px; margin-top: 10px; margin-bottom: 10px; } .icon-text { height: 20px; line-height: 20px; font-size: 18px; } .user { position: fixed; top: 0; bottom: 0; left: 0; border-right: 1px solid #dbdbdb; box-sizing: border-box; } .user .user-box { position: absolute; top: 0; bottom: 0; } .user .user-box .user-face-wrapper { display: flex; align-items: center; justify-content: center; padding: 0 0 20rpx 0; } .user .user-box .user-face { width: 150rpx; height: 150rpx; position: fixed; border-radius: 50%; -moz-box-shadow: 0px 3px 20px #333; -webkit-box-shadow: 0px 3px 20px #333; box-shadow: 0px 3px 20px #333; } .user .user-box .user-info { height: 30px; position: fixed; margin-top: 60px; } .user .user-box .user-info text { width: 200rpx; height: 28px; float: left; } .user .user-box .user-info image { height: 20px; width: 20px; float: left; } .user .user-box .one-menu { display: flex; align-items: center; justify-content: center; padding: 20rpx; margin-bottom: 20rpx; color: white; font-size: 38rpx; } /*---------------------------*/ .dialog { /*透明蒙层*/ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; z-index: 1000; color: #fff; } |
//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) } }) }, //获取首页列表文章 fetchPostsData: function (data) { var self = this; //获取详询活动信息 var molist = new Array(); var Diary = Bmob.Object.extend("Events"); var query = new Bmob.Query(Diary); query.equalTo("isShow", 1); //公开显示的 query.limit(self.data.limitPage); console.log(self.data.limitPage); query.skip( 3 * self.data.currentPage); query.descending("createdAt"); //按照时间降序 query.include("publisher"); 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 endtime = results[i].get("endtime"); var address = results[i].get("address"); var acttypename = getTypeName(acttype); //根据类型id获取类型名称 var isShow = results[i].get("isShow"); 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 || '', "acttypename": acttypename || '', "isShow": isShow, "endtime": endtime || '', "address": address || '', "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.onSetData(molist, self.data.currentPage); setTimeout(function () { wx.hideLoading(); }, 900); }, error: function (error) { console.log(error) } }) }, //加载下一页 loadMore: function () { wx.showLoading({ title: '正在加载', mask: true }); //一秒后关闭加载提示框 setTimeout(function () { wx.hideLoading() }, 1000) var self = this; self.setData({ currentPage: self.data.currentPage + 1 }); console.log("当前页"+self.data.currentPage); //先判断是不是最后一页 if (self.data.currentPage + 1 == self.data.totalPage){ self.setData({ isEmpty: true }) if (self.data.endPage != 0) { //如果最后一页的加载不等于0 self.setData({ limitPage: self.data.endPage, }) } this.fetchPostsData(self.data); }else{ this.fetchPostsData(self.data); } }, //点击刷新 refresh: function () { this.setData({ postsList: [], //总的活动 postsShowSwiperList: [], //轮播图显示的活动 currentPage: 0, //要跳过查询的页数 limitPage: 3,//首先显示3条数据(之后加载时都增加3条数据,直到再次加载不够3条) isEmpty: false, //当前查询出来的数据是否为空 totalCount: 0, //总活动数量 endPage: 0, //最后一页加载多少条 totalPage: 0, //总页数 curIndex: 0, windowHeight1: 0, windowWidth1: 0, }) this.onShow(); }, // 点击活动进入活动详情页面 click_activity: function (e) { if (!this.buttonClicked) { util.buttonClicked(this); let actid = e.currentTarget.dataset.actid; let pubid = e.currentTarget.dataset.pubid; let user_key = wx.getStorageSync('user_key'); wx.navigateTo({ url: '/pages/detail/detail?actid=' + actid + "&pubid=" + pubid }); } }, //点击搜索 click_search: function () { if (!this.buttonClicked) { util.buttonClicked(this); console.log(getCurrentPages()) wx.navigateTo({ url: '/pages/search/search', }); } }, //进入我的发起 click_myLaunch: function () { if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/mylaunch/mylaunch', }); } }, //进入我的加入 click_myJoin: function () { if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/myjoin/myjoin', }); } }, //进入我的收藏 click_myCollection: function () { if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/mycollection/mycollection', }); } }, //进入项目简介 click_projectBrief: function () { if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/projectbrief/projectbrief', }); } }, //进入反馈建议 click_Tick:function(){ if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/issues/issues', }); } }, //进入更多信息 click_more:function(){ if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/more/more', }); } }, //进入关于我们 click_aboutUs: function () { if (!this.buttonClicked) { util.buttonClicked(this); wx.navigateTo({ url: '/pages/my/aboutus/aboutus', }); } }, //-------------------------------------------------------------------------------------------------------- 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; } |
模板简介:该模板名称为【微信小程序单图文列表页面样式模板制作设计(带幻灯片+加载更多】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。