<!--index.wxml-->
<view class="article-list">
<scroll-view scroll-y class="con" bindscrolltolower="getMoreArticle">
<!-- 第一列 -->
<view class="col-wrap" >
<view class="item" wx:for="{{articleList[0]}}" wx:key="{{item.id}}" wx:for-index="idx">
<navigator url="/pages/detail/detail?title={{item.title}}& hover-class="none">
<image src="{{item.imgUrl}}" class="img" lazy-load='true'></image>
</navigator>
<view class="article-info">
<view class="article-title">{{item.title}}</view>
<view class="footer-info">
<view class="left">
<view class="headimg">
<image mode="widthFix" src="{{item.avatarUrl}}" lazy-load='true' class="headimg"></image>
</view>
<view class="nickname">{{item.nickName}}</view>
</view>
<view class="likes {{item.isLike==true ?'liked':''}}" bindtap='doLike' data-item="{{item}}" data-idx="{{idx}}" data-col="0">{{item.likes}}</view>
</view>
</view>
</view>
</view>
<!-- 第二列 -->
<view class="col-wrap" >
<view class="item" wx:for="{{articleList[1]}}" wx:key="{{articleList.id}}" wx:for-index="idx">
<navigator url="/pages/detail/detail?title={{item.title}}& hover-class="none">
<image src="{{item.imgUrl}}" class="img" lazy-load='true'></image>
</navigator>
<view class="article-info">
<view class="article-title">{{item.title}}</view>
<view class="footer-info">
<view class="left">
<view class="headimg">
<image mode="widthFix" src="{{item.avatarUrl}}" class="headimg" lazy-load='true'></image>
</view>
<view class="nickname">{{item.nickName}}</view>
</view>
<view class="likes {{item.isLike==true ?'liked':''}}" bindtap='doLike' data-item="{{item}}" data-idx="{{idx}}" data-col="1">{{item.likes}}</view>
</view>
</view>
</view>
</view>
<!-- <view class="isloading" wx:if="{{isLoading}}">加载中</view> -->
<view class="nomore" wx:if="{{!hasMore}}"></view>
</scroll-view>
<navigator url="/pages/write/write" hover-class="none" class="goWrite">
<image src="{{sendImg}}" class="send-icon"></image>我觉得
<text>...</text>
</navigator>
</view>
/**index.wxss**/
.article-list {
padding: 16rpx 0 0 20rpx;
box-sizing: border-box;
}
.article-list .con {
height: 100vh;
/* margin-bottom: 60rpx; */
}
.article-list .col-wrap{
display:inline-block;
width:345rpx;
margin-right:15rpx;
vertical-align: top;
}
.article-list .item {
background: #fff;
border:1rpx solid #d4d3d4;
box-sizing: border-box;
width:100%;
margin-bottom: 16rpx;
border-radius:10rpx;
overflow: hidden;
}
.article-list .col-wrap .img{
width: 345rpx;
display: block;
}
.article-list .article-info{
padding:12rpx 20rpx;
}
.article-list .headimg{
width: 46rpx;
height:46rpx;
margin-right: 4rpx;
border-radius: 50%;
overflow: hidden;
will-change: transform;
}
.article-list .nickname{
font-size: 21rpx;
color:#595757;
}
.article-list .likes {
font-size:21rpx;
position:relative;
/* z-index: 1; */
color: #898989;
padding-left: 30rpx;
}
.article-list .likes::before{
content: '';
width: 28rpx;
height: 20rpx;
position:absolute;
left:0;
top:4rpx;
background: url(like_icons.png?v=3) no-repeat 0 0;
background-size: cover;
}
.article-list .likes.liked{
color:#e4007f;
}
.article-list .likes.liked::before{
content: '';
background-position: right 0;
/* background-size: 100%; */
}
.article-list .footer-info{
display: -webkit-flex;
display: flex;
justify-content: space-between;
align-items:center;
height: 46rpx;
}
.article-list .article-title{
font-size:23rpx;
color:#595757;
margin-bottom:12rpx;
line-height: 30rpx;
}
.article-list .left {
display: -webkit-flex;
display: flex;
align-items:center;
}
.goWrite{
width:428rpx;
height:84rpx;
line-height: 84rpx;
background: #e4007f;
border-radius:14rpx;
margin-top:20rpx;
position:fixed;
bottom: 15rpx;
left:50%;
margin-left: -214rpx;
box-sizing: border-box;
padding-left: 174rpx;
color:#fff;
font-size: 40rpx;
/* box-shadow: 0 -1rpx 2rpx rgba(159,160,160,0.75); */
}
.goWrite text{
position:relative;
top:-10rpx;
margin-left:8rpx;
}
.send-icon{
width:110rpx;
height:118rpx;
position:absolute;
left:40rpx;
bottom:0;
}
.nomore{
height: 120rpx;
width:100%;
}
.isloading{
text-align: center;
font-size: 30rpx;
height: 160rpx;
line-height: 160prx;
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
page:1,//页码
col1Height: 0,
col2Height: 0,
sendImg: 'send_icon.png',
articleList: [[], []],
hasMore: true,
isLoading : false,
},
//点赞
doLike: function (e) {
let cur = e.currentTarget.dataset.item;
let col = e.currentTarget.dataset.col;
let idx = e.currentTarget.dataset.idx;
wx.request({
url: '',
method: 'POST',
data: {
token: wx.getStorageSync('token'),
id: cur.id
},
success: (res) => {
let {errcode,isLike,likes} = res.data;
if(errcode==0){
this.data.articleList[col][idx].isLike = isLike;
this.data.articleList[col][idx].likes = likes;
this.setData({
articleList: this.data.articleList
});
}
}
})
},
//获取初始数据
getInitData: function () {
this.setDataInit();
wx.showLoading({
title: '加载中',
mask:true
})
wx.request({
url: '',
method:'POST',
data:{
token:wx.getStorageSync('token'),
page:1
},
success:(res)=>{
wx.hideLoading();
if (res.data.list.length>0){
this.addCol(res.data.list);
}else{
this.setData({
hasMore: false
});
}
}
})
},
//添加到不同列
addCol: function (data) {
let titleH = 112;
for (let article of data) {
if (article.title.length > 15) {
titleH = 144;
}
if (this.data.col1Height <= this.data.col2Height) {
this.setData({
col1Height: this.data.col1Height + Math.floor(article.height * 345 / article.width) + titleH+16
});
let arr1 = this.data.articleList[0];
arr1.push(article)
this.setData({
'articleList[0]': arr1
});
} else {
this.setData({
col2Height: this.data.col2Height + Math.floor(article.height * 345 / article.width) + titleH+16
});
let arr2 = this.data.articleList[1];
arr2.push(article);
this.setData({
'articleList[1]': arr2
});
}
}
},
getMoreArticle: function () {
if (this.data.hasMore && !this.data.isLoading) {
this.setData({
page:this.data.page+1,
isLoading:true
});
wx.request({
url: '',
method: 'POST',
data: {
token: wx.getStorageSync('token'),
page: this.data.page
},
success: (res) => {
let {list} = res.data;
this.setData({
isLoading: false
});
if(list.length>0){
this.addCol(list);
}else{
this.setData({
hasMore: false
});
}
}
})
}
},
setDataInit: function (){
this.setData({
col1Height: 0,
col2Height: 0,
articleList: [[], []],
hasMore: true,
isLoading: false,
page: 1
});
},
onReady: function () {
},
onLoad: function () {
},
onShow:function () {
if(wx.getStorageSync('token')!=""){
this.getInitData();
}else{
app.tokenReadyCallBack = res =>{
this.getInitData();
}
}
},
onHide:function(){
this.setDataInit();
}
})