首先我们来看一下效果
我先说一下自己的思路吧
一个模拟hotList列表数据,因为是小说根据当前小说人气进行排序,
本次分享仅供参考,根据自己的需求去实现自己的排序
好了废话不多说,来看看代码吧
wxml
<view class="hot-list">
<view class="books" wx:for="{{hotList}}" wx:key="index">
<image src="{{item.img}}"></image>
<view class="books-right">
<view class="books-title">
<view>{{item.title}}</view>
<view>{{index + 1}}</view>
</view>
<view class="books-introduce">[{{item.status}}]{{item.introduce}}</view>
<view class="book-B">
<view>{{item.author}}</view>
<view>
<text>{{item.category}}</text>
</view>
</view>
</view>
</view>
</view>wxss
.hot-list {
background: white;
padding: 0 30rpx;
}
.hot-list view:nth-child(1) .books-right .books-title view:nth-child(2){
color: #DC143C;
}
.hot-list view:nth-child(2) .books-right .books-title view:nth-child(2){
color: #FF4500;
}
.hot-list view:nth-child(3) .books-right .books-title view:nth-child(2){
color: #FF8C00;
}
.books {
display: flex;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1px solid #efefef;
}
.books image {
width: 200rpx;
height: 250rpx;
}
.books-right {
width: 70%;
margin-left: 20rpx;
padding: 10rpx 0;
}
.books-right .books-title {
font-size: 35rpx;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
}
.books-right .books-title view:nth-child(2) {
color: gray;
font-style: oblique;
}
.books-right .books-introduce {
margin-top: 20rpx;
font-size: 25rpx;
color: gray;
letter-spacing: 5rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
.books-right .book-B {
margin-top: 40rpx;
font-size: 25rpx;
color: gray;
display: flex;
justify-content: space-between;
align-items: center;
}
.books-right .book-B view:nth-child(2) {
font-size: 20rpx;
}
.books-right .book-B view:nth-child(2) text:nth-child(1) {
border: 1px solid gray;
padding: 5rpx 10rpx;
}重要部分js
Page({
/**
* 页面的初始数据
*/
data: {
hotList: [
{
id: 1,
title: "我侄子戒心实在太重了",
img: "../../../image/16093s.jpg",
introduce: "资深程序员陈耀东穿越到平行世界，回到十六岁的高中时期，是一个孤儿。很快，他发现这里有行事无所顾忌的武者，有阴森诡异的黑暗修士，处处是危险。他必须小心提防，对周边的一切保持警惕！通过一本日记，他发现身边还有一个处心积虑，想谋夺他家产的女人，他那个死去的便宜小叔的未过门的妻子……没关系，只要变得足够强，就没人能伤害我了。本书又名，玩游戏就能变强。",
status: "完结",
category: "玄幻",
author: "作者",
popularity: "10"
},
{
id: 2,
title: "我侄子戒心实在太重了",
img: "../../../image/16093s.jpg",
introduce: "资深程序员陈耀东穿越到平行世界，回到十六岁的高中时期，是一个孤儿。很快，他发现这里有行事无所顾忌的武者，有阴森诡异的黑暗修士，处处是危险。他必须小心提防，对周边的一切保持警惕！通过一本日记，他发现身边还有一个处心积虑，想谋夺他家产的女人，他那个死去的便宜小叔的未过门的妻子……没关系，只要变得足够强，就没人能伤害我了。本书又名，玩游戏就能变强。",
status: "完结",
category: "玄幻",
author: "作者",
popularity: "50"
},
{
id: 3,
title: "我侄子戒心实在太重了",
img: "../../../image/16093s.jpg",
introduce: "资深程序员陈耀东穿越到平行世界，回到十六岁的高中时期，是一个孤儿。很快，他发现这里有行事无所顾忌的武者，有阴森诡异的黑暗修士，处处是危险。他必须小心提防，对周边的一切保持警惕！通过一本日记，他发现身边还有一个处心积虑，想谋夺他家产的女人，他那个死去的便宜小叔的未过门的妻子……没关系，只要变得足够强，就没人能伤害我了。本书又名，玩游戏就能变强。",
status: "完结",
category: "玄幻",
author: "作者",
popularity: "63"
},
{
id: 4,
title: "我侄子戒心实在太重了",
img: "../../../image/16093s.jpg",
introduce: "资深程序员陈耀东穿越到平行世界，回到十六岁的高中时期，是一个孤儿。很快，他发现这里有行事无所顾忌的武者，有阴森诡异的黑暗修士，处处是危险。他必须小心提防，对周边的一切保持警惕！通过一本日记，他发现身边还有一个处心积虑，想谋夺他家产的女人，他那个死去的便宜小叔的未过门的妻子……没关系，只要变得足够强，就没人能伤害我了。本书又名，玩游戏就能变强。",
status: "完结",
category: "玄幻",
author: "作者",
popularity: "82"
},
],
},
// 根据小说人气进行从大到小排序
hotListSort: function() {
var arr_length = this.data.hotList.length;
// 按人气排序获取数据数组的长度
for(var i=0; i<arr_length; i++) {
for(var j=0; j<arr_length - i - 1; j++) {
let arr_popularity1 = this.data.hotList[j].popularity;
let arr_popularity2 = this.data.hotList[j + 1].popularity;
let arr_index1 = this.data.hotList[j];
let arr_index2 = this.data.hotList[j+1];
if(arr_popularity1<arr_popularity2) {
// 对比相邻两个数组元素的大小
let zhongjie1 = arr_index2.popularity;
let zhongjie2 = arr_index2.title;
let zhongjie3 = arr_index2.img;
let zhongjie4 = arr_index2.author;
let zhongjie5 = arr_index2.introduce;
let zhongjie6 = arr_index2.status;
// 把小的数组元素的值赋值给一个中介
arr_index2.popularity = arr_index1.popularity;
arr_index2.title = arr_index1.title;
arr_index2.img = arr_index1.img;
arr_index2.author = arr_index1.author;
arr_index2.introduce = arr_index1.introduce;
arr_index2.status = arr_index1.status;
// 把大的数组元素赋值给小的数组元素
arr_index1.popularity = zhongjie1;
arr_index1.title = zhongjie2;
arr_index1.img = zhongjie3;
arr_index1.author = zhongjie4;
arr_index1.introduce = zhongjie5;
arr_index1.status = zhongjie6;
}
}
}
this.setData({
hotList: this.data.hotList,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.hotListSort();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})以上就是所有代码,是不是很简单,敲一遍就知道怎么回事了
