在开发一款背单词的微信小程序时,为了加强用户的体验感,刺激用户积极学习,小程序中需要有排行榜的模块。通过打卡天数来排名,让用户有攀比学习的心里。具体的页面截图如下:
wxml
<view class="container">
<view class="rank-item" style="position: relative; left: 0rpx;">
<!--头像-->
<view class="rank-img">
<image src="{
{my_avatar_url}}"></image>
</view>
<!--展示昵称,以及贡献值-->
<view>
<view class="rank-name">{
{my_nickname}}</view>
<view class="rank-price">打卡次数:{
{my_total_fee}}次</view>
</view>
<!--排名-->
<view class="rank-uv">
<text wx:if="{
{my_rank!=0}}">您的排名:第 {
{my_rank}} 名</text>
<text wx:if="{
{my_rank==0}}">抱歉您暂时未上榜</text>
</view>
</view>
<view wx:for="{
{dataList}}" wx:key="item" class="rank_block">
<view class="rank-item">
<!--头像-->
<view class="rank-img">
<image src="{
{item.avatarUrl}}"></image>
</view>
<!--展示昵称,以及贡献值-->
<block>
<view class="rank-name">{
{item.name}}</view>
<view class="rank-price">打卡次数:{
{item.login_day_num}}次</view>
</block>
<!--排名-->
<view class="rank-uv">
<text wx:if="{
{item.rank>3}}">第 {
{item.rank}} 名</text>
<image src="/images/rank{
{item.rank}}.png" wx:if="{
{item.rank<=3}}" />
</view>
</view>
</view>
</view>
wxss
page {
background-color: #fbf9fe;
}
.container {
width: 100%;
margin-bottom: 80rpx;
margin-top: 10rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.rank-item {
height: 200rpx;
width: 750rpx;
background: #fff;
margin-bottom: 8rpx;
padding: 20rpx 20rpx 20rpx 50rpx;
box-sizing: border-box;
position: relative;
}
.rank-item .rank-img {
width: 100rpx;
height: 100rpx;
float: left;
margin-right: 50rpx;
position: relative;
}
.rank-item .rank-img image {
position: absolute;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
top: 0;
left: 0;
}
.rank-item .rank-name {
font-size: 32rpx;
height: 50rpx;
line-height: 50rpx;
color: #4e5b65;
font-weight: bold;
}
.rank-item .rank-full {
font-size: 32rpx;
height: 100rpx;
line-height: 100rpx;
color: #4e5b65;
}
.rank-item .rank-price {
height: 40rpx;
line-height: 40rpx;
margin-top: 10rpx;
font-size: 24rpx;
color: #d55a4a;
}
.rank-item .rank-uv text {
font-size: 38rpx;
position: absolute;
height: 100rpx;
line-height: 100rpx;
bottom: 20rpx;
right: 20rpx;
color: #777;
}
.rank-item .rank-uv image {
position: absolute;
width: 100rpx;
height: 100rpx;
bottom: 20rpx;
right: 20rpx;
}
.rank_block{
margin-top: 10rpx;
}
js
Page({
data: {
dataList: [],
my_avatar_url:'',
my_nickname:'',
my_total_fee:'',
my_rank:0,
},
onLoad: function () {
this.get_rank_list();
},
onShow: function () {
this.get_rank_list();
},
onPullDownRefresh: function () {
//下拉刷新
wx.stopPullDownRefresh();
this.get_rank_list();
},
get_rank_list: function(){
var that = this;
that.setData({
dataList:
my_avatar_url:
my_nickname:
my_total_fee:
my_rank:
})
},
})
ps:setData中的内容需要自己从后端获取后赋值到页面!
图片素材:
其实排行榜最早的发明也是因为商业目的,想借由人性的共趋性来制造商机,这点跟打折吸引消费者有着异曲同工。然而跟所有的游戏一样,玩久了参与者发现了游戏规则外的空间,制造者发现了它额外的价值,于是作弊的事情悄悄地发生了。
其实在实体的年代里,排行榜还是有它必要的存在性,尤其在资讯告知下,排行榜的确是消费者重要的资讯。虽然消费者也渐渐明白排行榜中蕴藏了太多商业介入,然而在媒体是主动的年代里,有钱的厂家可以用预算强迫洗脑,大多数的消费者也渐渐地失去判断力。在这个数位年代里消费者不再是被动的了,而网络媒体还用着排行榜的伎俩,他们能支撑多久呢。在网络年代里提供人们一个新的生活态度,因为大众族群是由许多小众群众组成的,有长远思考的数位媒体是很乐意提供出给使用者容易搜寻各种资料的工具,那才是数位业最大的商机。点阅率的排行榜是其中工具里面比较不重要的一项,因为以点阅率排行榜来谋生往往是一个不能长久去经营的策略,如果过度偏重它最后会赔了全局。诚实地说,在音乐的网络世界里,作假的排行榜比比皆是,有的是主动造局,有的是被动地走到这个局面。然而全盘的检讨是不是网络媒体太看重排行榜这个数位年代以前的旧价值观呢。如果数位平台的经营者价值观是旧的,那么使用者流向别处是必然的结局。
文章浏览阅读3.8k次,点赞9次,收藏28次。直接上一个工作中碰到的问题,另外一个系统开启多线程调用我这边的接口,然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法,放到线上后发现确实是可以正常取到结果,但是一旦调用,CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了,类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99
文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效
文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别,这些API绝大多数都被包装到了一个具名和核心模块中了,例如文件操作的 fs 核心模块 ,http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是
文章浏览阅读10w+次,点赞435次,收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件
文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢?1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件
文章浏览阅读867次,点赞2次,收藏2次。docker安装elasticsearch,elasticsearch-head,kibana,ik分词器安装方式基本有两种,一种是pull的方式,一种是Dockerfile的方式,由于pull的方式pull下来后还需配置许多东西且不便于复用,个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码
文章浏览阅读1.3w次,点赞57次,收藏92次。整理 | 郑丽媛出品 | CSDN(ID:CSDNnews)近年来,随着机器学习的兴起,有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块,内置..._beeware
文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年 飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停
文章浏览阅读986次,点赞2次,收藏2次。1.硬性等待让当前线程暂停执行,应用场景:代码执行速度太快了,但是UI元素没有立马加载出来,造成两者不同步,这时候就可以让代码等待一下,再去执行找元素的动作线程休眠,强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待
文章浏览阅读3k次,点赞4次,收藏14次。Java软件工程师职位分析_java岗位分析
文章浏览阅读2k次。Java:Unreachable code的解决方法_java unreachable code
文章浏览阅读1w次。1、html中设置标签data-*的值 标题 11111 222222、点击获取当前标签的data-url的值$('dd').on('click', function() { var urlVal = $(this).data('ur_如何根据data-*属性获取对应的标签对象