首先我们来看一下效果
我先说一下自己的思路吧
一个模拟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() {}})
以上就是所有代码,是不是很简单,敲一遍就知道怎么回事了
