js实现排行榜(根据我微信小程序项目所分享)完整版

首先我们来看一下效果

我先说一下自己的思路吧

一个模拟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

以上就是所有代码,是不是很简单,敲一遍就知道怎么回事了