小程序类似糗事百科一样左右滑的效果，每个页面有下拉加载

由于开发需要一开始加载一个页面，左滑出现一个页面右滑出现另一个页面的功能，一开始选择的是监听左滑调一个页面，右滑调一个页面。但是效果不好，因为小程序默认页面出来是从右边向左边出，所以右滑理应是右边出来的页面却从左边出来了。最后的解决方案是用小程序自带的swiper实现整个效果。由于除了首页，其他的页面都需要下拉加载，至于下拉加载部分，各位可以看我写的下拉加载部分的代码哦。

<view class="scrollers"><swiper class="swiper" current="{
   {currentTopItem}}" bindchange="bindChange" duration="300" style="height:{
   {swiperHeight}}px"><!--全部--><swiper-item><view class="top-tab tab-bg"><view class="showprev"><image class="findmenuimg" src="../img/find/find_menu.png" bindtap="xxx"></image></view><view class="showtitle shan">发现</view><view class="shownext"><image class="show_leftright_img" src="../img/index/next.png" bindtap="tohomepage"></image></view></view><scroll-view class="scrollView shanscroller" lower-threshold="50" bindscrolltolower="myscrollertolower" style="height:{
   {scrollHeight}}px;" scroll-y><view class='line-break'></view><view class="find"><!-- 展示头像及感受 --><view class='show_public_and_feel'><!-- 头像及发表时间部分 --><view class='clientimg_name_time'><view class='showheader_img'><image src='../img/test/header.png' mode='scaleToFill'></image></view><view class='show_name'>xxx</view><view class='show_time'><image src='../img/find/publish_time.png'></image>1小时10分钟前</view></view><!-- 展示感受部分 --><view class='show_feel'><view class='show_feel_content'><text>今天这里太舒服了，人好少，刚刚开始享受</text></view></view></view><!-- 展示分享出来的图片 --><view class='showfeel_img'><view class='show_more_three_img'><view class='showfeel_left_img'><image src='../img/test/img3.png'  mode='aspectFill'></image></view><view class='showfeel_right_img'><view class='showfeel_right_top'><image src='../img/test/img2.png'  mode='aspectFill'></image></view><view class='showfeel_right_top'><view class='show_img_number shan'>+3</view><image src='../img/test/img1.png'  mode='aspectFill'></image></view></view></view></view><!-- 展示点赞及评论 --><view class='thumb_up_and_comment'><!-- 展示点赞 --><view class='thumb_up'><image src='../img/find/liking.png'></image>34</view><!-- 展示评论 --><view class='comment'><image src='../img/find/comment.png'></image>21</view></view></view></scroll-view></swiper-item><swiper-item><!-- 头部展示名称及图标显示左右 --><view class="top-tab"><view class="showprev"><image class="show_leftright_img" src="../img/index/perv.png" bindtap="toprev"></image></view><view class="showtitle shan">书吧</view><view class="shownext"><image class="show_leftright_img" src="../img/index/next.png" bindtap="tonext"></image></view></view><view class="showcontentmenu"><view class="show_menu" style="{
   {translate}}" catchtap="touchnone" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove" bindtouchend="mytouchend"><!-- 显示运营上的图片 --><view class="show_img imgafter"><image class="showbanner" mode="scaleToFill" src="../img/index/banner.png"></image></view><view class="menu"><!-- 显示可以滚动的部分 --><scroll-view scroll-y catchscroll="scrollertoper" class="scroller"><view class=" scan border {
   {index == toView? 'show_active':''}} " wx:for="{
   {dataList}}" wx:key="{
   {index}}" data-testIndex="{
   {index}}" catchtap="showclass"><image class="show_menu_icon" src="{
   {item.src}}"></image>{
   {item.title}}</view></scroll-view></view></view></view><!-- 展示签到 --><button class="show_sign_in">扫码</button></swiper-item><swiper-item><view class="top-tab tab-bg"><view class="showprev"><image class="show_leftright_img" src="../img/index/perv.png" bindtap="tohomepage"></image></view><view class="showtitle shan">吃喝玩乐</view><view class="shownext"><image class="psetting" src="../img/personal_center/setting.png" bindtap="toset"></image></view></view><scroll-view class="scrollView" scroll-y="true" bindscrolltolower="loadMoreData"></scroll-view></swiper-item></swiper>
</view>

/* 最大的page设置 */page {width: 100%;height: 100%;font-size: 16px;font-family: "微软雅黑";overflow: hidden;
}/* 展示滑动模块 */.swiper {width: 100%;height: 100%;background: #b2b2b2;overflow-x: hidden;
}/* 滑动区域 */.scrollers, .scrollView {width: 100%;height: 100%;overflow-x: hidden;
}/* 滑动区域颜色 */.scrollView {background: #ddd;
}/* 最上面的tab */.top-tab {width: 100%;height: 80rpx;background: #b4b4b4;overflow: hidden;
}
.tab-bg{background: #dedede;
}/* 左边箭头 */.showprev {width: 20%;height: 100%;float: left;text-align: center;
}/* 右边箭头 */.shownext {width: 19%;height: 100%;float: left;text-align: center;
}/* 发现左边图片 */.findmenuimg {width: 43rpx;height: 30rpx;padding-top: 17rpx;
}/* 个人资料右边 */.psetting {width: 45rpx;height: 38rpx;padding-top: 19rpx;
}/* 展示头部名称 */.showtitle {width: 60%;height: 100%;float: left;font-size: 26rpx;text-align: center;
}/* 箭头的设置 */.show_leftright_img {width: 22rpx;height: 40rpx;padding-top: 17rpx;vertical-align: middle;
}/* 文字居中 */.shan:after {display: inline-block;width: 0;height: 100%;content: "";vertical-align: middle;
}/* 展示包裹菜单的最大的div */.showcontentmenu {width: 100%;height: 80%;position: relative;top: 0;overflow: hidden;
}/* 展示主菜单 */.show_menu {height: 100%;width: 100%;margin-top: 5%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);overflow: hidden;
}/* 展示图片区域 */.show_img {width: 76.2%;margin-left: 12.3%;height: 48%;text-align: center;background: #fff;color: #ccc;
}.showbanner {width: 100%;height: 100%;display: block;
}.show_menu_icon {width: 36rpx;height: 48rpx;vertical-align: middle;margin-right: 50rpx;margin-left: 63rpx;
}/* 展示下面的菜单 */.menu {width: 100%;height: 51%;
}/* 菜单可滚动 */.scroller {width: 90%;height: 100%;margin-left: 5%;padding-bottom: 1%;
}/* 展示菜单下的div */.scan {width: 84.3%;height: 30%;background: #fff;margin-left: 8.2%;text-align: left;/* padding-left: 5%; */color: #b7b7b7;
}/* 展示有border的 */.border {border-bottom: 1rpx solid #ccc;
}.show_sign_in {width: 100%;height: 120rpx;line-height: 120rpx;position: absolute;bottom: 0;border-radius: 0;background: -moz-linear-gradient(left, #deffca, #a3f8ff); /*Mozilla*/background: -webkit-gradient(linear, 0 50%, 100% 50%, from(#deffca), to(#a3f8ff)); /*Old gradient for webkit*/background: -webkit-linear-gradient(left, #deffca, #a3f8ff); /*new gradient for Webkit*/background: -o-linear-gradient(left, #deffca, #a3f8ff); /*Opera11*/
}/* 将文字居中 */.scan:after, .imgafter:after {width: 0%;height: 100%;vertical-align: middle;display: inline-block;content: "";
}/* 去掉默认有的滚动条 */::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}/* 展示当前活动的区域 */.show_active {/* transform: scale(1.15, 1.15); */position: relative;width: 100%;height: 33%;margin-left: 0%;-webkit-box-shadow: 0 0 14px #ebebeb;-moz-box-shadow: 0 0 14px #ebebeb;box-shadow: 0px 0px 14px #ebebeb;color: #b7b7b7;font-size: 16px;border: none;
}/* 展示发现第一个div离内容多远 */.line-break {width: 100%;height: 6%;
}/* 发现中最大div的设置 */.find {width: 88%;margin-left: 7%;margin-bottom: 2%;/* border: 1px solid red;    */
}/* 展示头像及看书感触 */.show_public_and_feel {width: 88%;height: 280rpx;overflow: hidden;background: #fff;margin-left: 6%;box-shadow: 40rpx 0rpx 40rpx #c2c2c2;/* border: 1px saddlebrown solid; */
}/* 展示发表人的头像和发表时间 */.clientimg_name_time {width: 100%;height: 100rpx;
}/* 展示头像大小 */.showheader_img {width: 100rpx;height: 100rpx;float: left;box-shadow: 1rpx 10rpx 40rpx #c2c2c2;
}.showheader_img>image {width: 100%;height: 100%;
}/* 展示名字 */.show_name {width: 40%;height: 100%;float: left;text-align: left;line-height: 100rpx;padding-left: 4%;
}/* 展示发表时间 */.show_time {width: 37%;height: 100%;line-height: 100rpx;float: left;font-size: 24rpx;color: #b8b8b8;overflow: hidden;
}/* 发表时间的钟图片 */.show_time>image {width: 27rpx;height: 27rpx;margin-top: -2rpx;vertical-align: middle;margin-right: 6%;
}/* 展示感受区域 */.show_feel {width: 100%;height: 180rpx;position: relative;overflow: hidden;
}/* 展示感受里面的内容，并且居中 */.show_feel_content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 90rpx;width: 60%;font-size: 28rpx;line-height: 45rpx;font-family: "微软雅黑";display: -webkit-box;display: -moz-box;-moz-box-orient: vertical;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}
/* 展示图片的最大的view */
.showfeel_img{width: 96%;height: 500rpx;margin-left: 2%; box-shadow: 30rpx 40rpx 60rpx #c2c2c2;position: relative;z-index: 2;
}
/* 展示多于三张图的view */
.show_more_three_img,.show_two_img,.show_one_img{width: 100%;height: 100%;overflow: hidden;
}
/* 展示多于三张图的view的左边放比较大的图片的view */
.showfeel_left_img{width: 60%;height: 100%;float: left;
}
.showfeel_left_img>image{width: 100%;height: 100%;
}
/* 多于三张图的view右边展示两张小的图片 */
.showfeel_right_img{width: 40%;height: 100%;float: left;
}
/* 展示多于三张图的view右边上下两张图片 */
.showfeel_right_top{width: 100%;height: 50%;
}
/* 右边的图片大小 */
.showfeel_right_top>image{width: 100%;height: 100%;
}
/* 展示两张图片的排版 */
.show_two_img>view{height: 100%;float: left;
}
.showtwo_left_img{width: 60%;
}
/* 展示两张图片时左边图片设置 */
.showtwo_left_img>image{width: 100%;height: 100%;
}
/* 展示展示两张图片时右边的view最大的设置 */
.howtwo_right_img{position: relative;width: 40%;
}
.show_img_number{position: absolute;width: 40%;height: 50%;z-index: 3;color: #fff;font-size: 40rpx;font-weight: bold;background: rgba(0, 0, 0, 0.3);text-align: center;}
/* 展示展示两张图片时右边居中设置 */
.howtwo_right_img>view{width: 100%;height: 100%;
}
/* 展示展示两张图片时右边居中image */
.howtwo_right_img>view image{width: 100%;height: 100%;
}
/* 展示一张图片的设置 */
.show_one_img>image{width: 100%;height: 100%;
}
/* 展示点赞及评论最大的view */
.thumb_up_and_comment{width: 88%;height: 160rpx;margin-left: 6%;background: #fff;margin-bottom: 60rpx;box-shadow:20rpx 20rpx 60rpx #c2c2c2;
}
/* 展示点赞数 */
.thumb_up,.comment{width: 50%;height: 100%;float: left;text-align: center;line-height: 160rpx;color: #c4c4c4;/* border-right: 1px saddlebrown solid; */
}
.thumb_up>image,.comment>image{width: 40rpx;height: 40rpx;vertical-align: middle;margin-right: 20rpx;
}

Page({/*** 页面的初始数据*/data: {un_name: "Jonny\nLee",contents: "今天这里太舒服了，人好少\n刚刚开始看《黄金时代》",topTabItems: ["发现", "首页", "中心"],currentTopItem: 1,allDataList: ["1", "2", "3", "4"],scrollerBottom: 0,//用于判断是否,startPoint: [0, 0],//判断左滑还是右滑shanshan: 0,//用于判断是否translate: "",//用于滑动的时候的效果toView: 1,//用于判断哪个类有突出效果scrollHeight: 0,dataList: [{ title: "预约", src: "../img/index/book.png" }, { title: "点餐", src: "../img/index/dinner.png" }, { title: "电子检索", src: "../img/index/elesearch.png" }],shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }],navigatorList: ["../find/find", "../logs/logs", "../personal_center/personal_center"]},switchTab: function (e) {this.setData({ currentTopItem: e.currentTarget.dataset.idx })},// 首页点击左边箭头toprev:function(){this.setData({ currentTopItem: 0 })},// 首页右边箭头tonext:function(){this.setData({ currentTopItem: 2 })},// 发现页的右边箭头tohomepage:function(){this.setData({ currentTopItem: 1 })},// 个人资料的右边箭头toset: function () {wx.navigateTo({url: '../set/set',})},bindChange: function (e) {this.setData({ currentTopItem: e.detail.current })this.getdata();},getdata: function () {var thisindex = this.data.currentTopItem;if (thisindex == 0) {console.log("xxxxxxxxx");this.setData({ shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }] });} else if (thisindex == 1) {this.setData({ shanDataList: "" });console.log("sssssssss")} else if (thisindex == 2) {this.setData({ shanDataList: [{ "title": "我是珊珊。我想看看是不是出错了" }, { "title": "我是文哥。我想看看是不是出错了" }, { "title": "我是欧少。我想看看是不是出错了" }, { "title": "我是小熊。我想看看是不是出错了" }] });console.log("aaaaaaaaa")}},//鼠标按下mytouchstart: function (e) {this.setData({ startPoint: [e.touches[0].pageX, e.touches[0].pageY] });},//鼠标移动mytouchmove: function (e) {},//鼠标离开事件mytouchend: function (e) {},// 滑动区域的滑动效果scrollertoper: function (e) {this.setData({ shanshan: 0 });var top = e.detail.scrollTop;var nowView = this.data.toViewif (e.detail.deltaY < 0) {if ((top / 40) > nowView) {this.setData({ toView: nowView + 1 });}} else {if ((top / 40) < nowView && top > 40) {this.setData({ toView: nowView - 1 });}}this.setData({ shanshan: 0 });},touchnone: function (e) {this.setData({ shanshan: 0 });},// 点击每一个的时候把当前类给他showclass: function (e) {// var clickIndex = e.currentTarget.dataset.testindex;// console.log(this.data.navigatorList[clickIndex]);// this.setData({ toView: clickIndex });// wx.navigateTo({//   url: this.data.navigatorList[clickIndex],// })},myscrollertolower: function (e) {this.setData({ scrollerBottom: this.data.scrollerBottom + 1 });this.setData({ shanDataList: this.data.shanDataList.concat(this.data.shanList) });},loadMoreData: function (e) {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getdata();var that = this;wx.getSystemInfo({success: function (res) {that.setData({scrollHeight: res.windowHeight});}});},
})