首先我們來看一下效果

我先說一下自己的思路吧

一個(gè)模擬hotList列表數(shù)據(jù),因?yàn)槭切≌f根據(jù)當(dāng)前小說人氣進(jìn)行排序,

本次分享僅供參考,根據(jù)自己的需求去實(shí)現(xiàn)自己的排序

好了廢話不多說,來看看代碼吧

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({/*** 頁面的初始數(shù)據(jù)*/data: {hotList: [{id: 1,title: "我侄子戒心實(shí)在太重了",img: "../../../image/16093s.jpg",introduce: "資深程序員陳耀東穿越到平行世界，回到十六歲的高中時(shí)期，是一個(gè)孤兒。很快，他發(fā)現(xiàn)這里有行事無所顧忌的武者，有陰森詭異的黑暗修士，處處是危險(xiǎn)。他必須小心提防，對(duì)周邊的一切保持警惕！通過一本日記，他發(fā)現(xiàn)身邊還有一個(gè)處心積慮，想謀奪他家產(chǎn)的女人，他那個(gè)死去的便宜小叔的未過門的妻子……沒關(guān)系，只要變得足夠強(qiáng)，就沒人能傷害我了。本書又名，玩游戲就能變強(qiáng)。",status: "完結(jié)",category: "玄幻",author: "作者",popularity: "10"}, {id: 2,title: "我侄子戒心實(shí)在太重了",img: "../../../image/16093s.jpg",introduce: "資深程序員陳耀東穿越到平行世界，回到十六歲的高中時(shí)期，是一個(gè)孤兒。很快，他發(fā)現(xiàn)這里有行事無所顧忌的武者，有陰森詭異的黑暗修士，處處是危險(xiǎn)。他必須小心提防，對(duì)周邊的一切保持警惕！通過一本日記，他發(fā)現(xiàn)身邊還有一個(gè)處心積慮，想謀奪他家產(chǎn)的女人，他那個(gè)死去的便宜小叔的未過門的妻子……沒關(guān)系，只要變得足夠強(qiáng)，就沒人能傷害我了。本書又名，玩游戲就能變強(qiáng)。",status: "完結(jié)",category: "玄幻",author: "作者",popularity: "50"},{id: 3,title: "我侄子戒心實(shí)在太重了",img: "../../../image/16093s.jpg",introduce: "資深程序員陳耀東穿越到平行世界，回到十六歲的高中時(shí)期，是一個(gè)孤兒。很快，他發(fā)現(xiàn)這里有行事無所顧忌的武者，有陰森詭異的黑暗修士，處處是危險(xiǎn)。他必須小心提防，對(duì)周邊的一切保持警惕！通過一本日記，他發(fā)現(xiàn)身邊還有一個(gè)處心積慮，想謀奪他家產(chǎn)的女人，他那個(gè)死去的便宜小叔的未過門的妻子……沒關(guān)系，只要變得足夠強(qiáng)，就沒人能傷害我了。本書又名，玩游戲就能變強(qiáng)。",status: "完結(jié)",category: "玄幻",author: "作者",popularity: "63"},{id: 4,title: "我侄子戒心實(shí)在太重了",img: "../../../image/16093s.jpg",introduce: "資深程序員陳耀東穿越到平行世界，回到十六歲的高中時(shí)期，是一個(gè)孤兒。很快，他發(fā)現(xiàn)這里有行事無所顧忌的武者，有陰森詭異的黑暗修士，處處是危險(xiǎn)。他必須小心提防，對(duì)周邊的一切保持警惕！通過一本日記，他發(fā)現(xiàn)身邊還有一個(gè)處心積慮，想謀奪他家產(chǎn)的女人，他那個(gè)死去的便宜小叔的未過門的妻子……沒關(guān)系，只要變得足夠強(qiáng)，就沒人能傷害我了。本書又名，玩游戲就能變強(qiáng)。",status: "完結(jié)",category: "玄幻",author: "作者",popularity: "82"},],},// 根據(jù)小說人氣進(jìn)行從大到小排序hotListSort: function() {var arr_length = this.data.hotList.length;// 按人氣排序獲取數(shù)據(jù)數(shù)組的長(zhǎng)度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) {// 對(duì)比相鄰兩個(gè)數(shù)組元素的大小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;// 把小的數(shù)組元素的值賦值給一個(gè)中介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;// 把大的數(shù)組元素賦值給小的數(shù)組元素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,})},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad: function(options) {this.hotListSort();},/*** 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady: function() {},/*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow: function() {},/*** 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide: function() {},/*** 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload: function() {},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function() {},/*** 用戶點(diǎn)擊右上角分享*/onShareAppMessage: function() {} })

?

以上就是所有代碼,是不是很簡(jiǎn)單,敲一遍就知道怎么回事了

總結(jié)

以上是生活随笔為你收集整理的js实现排行榜(根据我微信小程序项目所分享)完整版的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。