小程序类似糗事百科一样左右滑的效果，每个页面有下拉加载
2017-12-15 17:21
295 查看
由于开发需要一开始加载一个页面，左滑出现一个页面右滑出现另一个页面的功能，一开始选择的是监听左滑调一个页面，右滑调一个页面。但是效果不好，因为小程序默认页面出来是从右边向左边出，所以右滑理应是右边出来的页面却从左边出来了。最后的解决方案是用小程序自带的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">
d1d8
<!-- 显示运营上的图片 -->
<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>
css部分
/* 最大的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;
}js部分
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.toView
if (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
});
}
});
},
})呼，一口气粘贴复制完这么多，累得不行啊。希望对你有用咯。没有用也不要打我咯
<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">
d1d8
<!-- 显示运营上的图片 -->
<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>
css部分
/* 最大的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;
}js部分
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.toView
if (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
});
}
});
},
})呼，一口气粘贴复制完这么多，累得不行啊。希望对你有用咯。没有用也不要打我咯
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery类似瀑布流效果边下拉页面边加载内容
- 页面的下拉加载效果基于ajax加载数据
- 原生js手机App页面下拉加载效果
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- 由于设计页面需要，要把两个并排显示的 div 实现一样高的效果， n 行 n 列布局，每列高度（事先并不能确定哪列的高度）相同，每个设计师追求的目标。方法有以下几种： 1 JS 实现（判断 2 个 d
- 新浪微博、慕课网、美团的、类似qq好友列表黏性下拉刷新风格。多种下拉刷新效果、上拉加载更多、可配置自定义头部广告位
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- 微信小程序页面滑动屏幕加载数据效果
- 关于托盘程序中 制作类似qq一样 弹出的效果 原创
- 点击侧滑任何一个 菜单项，请求网络数据展示在主界面的xlistview中且实现下拉刷新效果和上拉加载的分页加载数据效果
- 使用ViewPager实现欢迎页面左右拖动效果
- Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画
- JQuery页面随滚动条动态加载效果实现
- 微信小程序下拉加载执行多次怎么破？
- 类似MSN提示的页面效果
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果 推荐
- jquery实现瀑布流效果 jquery下拉加载新数据
- ajax无刷新加载页面程序代码