首页 > 编程语言 >微信小程序:排行榜页面模板

微信小程序:排行榜页面模板

时间:2023-08-15 18:08:33浏览次数:44  
标签:排行榜 微信 rank height item 100rpx my 模板 页面



文章目录

  • 1 前言
  • 2 模板代码
  • 3 结语



微信小程序:排行榜页面模板_小程序

1 前言

在开发一款背单词的微信小程序时,为了加强用户的体验感,刺激用户积极学习,小程序中需要有排行榜的模块。通过打卡天数来排名,让用户有攀比学习的心里。具体的页面截图如下:

微信小程序:排行榜页面模板_数位_02

2 模板代码

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,
    },

    onl oad: 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中的内容需要自己从后端获取后赋值到页面!

图片素材:

微信小程序:排行榜页面模板_微信小程序_03

微信小程序:排行榜页面模板_微信小程序_04

微信小程序:排行榜页面模板_排行榜_05

3 结语

其实排行榜最早的发明也是因为商业目的,想借由人性的共趋性来制造商机,这点跟打折吸引消费者有着异曲同工。然而跟所有的游戏一样,玩久了参与者发现了游戏规则外的空间,制造者发现了它额外的价值,于是作弊的事情悄悄地发生了。
其实在实体的年代里,排行榜还是有它必要的存在性,尤其在资讯告知下,排行榜的确是消费者重要的资讯。虽然消费者也渐渐明白排行榜中蕴藏了太多商业介入,然而在媒体是主动的年代里,有钱的厂家可以用预算强迫洗脑,大多数的消费者也渐渐地失去判断力。在这个数位年代里消费者不再是被动的了,而网络媒体还用着排行榜的伎俩,他们能支撑多久呢。在网络年代里提供人们一个新的生活态度,因为大众族群是由许多小众群众组成的,有长远思考的数位媒体是很乐意提供出给使用者容易搜寻各种资料的工具,那才是数位业最大的商机。点阅率的排行榜是其中工具里面比较不重要的一项,因为以点阅率排行榜来谋生往往是一个不能长久去经营的策略,如果过度偏重它最后会赔了全局。诚实地说,在音乐的网络世界里,作假的排行榜比比皆是,有的是主动造局,有的是被动地走到这个局面。然而全盘的检讨是不是网络媒体太看重排行榜这个数位年代以前的旧价值观呢。如果数位平台的经营者价值观是旧的,那么使用者流向别处是必然的结局。

微信小程序:排行榜页面模板_微信小程序_06


标签:排行榜,微信,rank,height,item,100rpx,my,模板,页面
From: https://blog.51cto.com/u_15229916/7091650

相关文章

  • 微信小程序:环形进度条模块
    利用canvas实现微信小程序环形进度条模块。模块下载链接:下载链接最近开发一款背单词的微信小程序,计划使用环形进度条展示每日背单词进度。效果图如下(可渐变颜色):开发步骤1、在根目录创建名为components的文件夹,用来放需要引用的自定义组件。2、创建名为circle的文件夹,用来放环形......
  • Streamlit 讲解专栏(三):两种方案构建多页面
    文章目录1前言2第一种方案:使用SessionState实现多页面交互2.1SessionState简介2.2多页面应用的基本结构2.3实现多页面交互的代码示例2.4SessionState机制的优缺点3第二种方案:Streamlit内置多页面方案(更为推荐)3.1如何运行多页面应用程序3.2添加页面3.3页面在用户界面......
  • 模板初阶
    一、泛型编程如何实现一个各种类型都能用的Swap函数?voidSwap(int&x,int&y){ inttmp=x; x=y; y=tmp;}voidSwap(char&x,char&y){ chartmp=x; x=y; y=tmp;}voidSwap(double&x,double&y){ doubletmp=x; x=y; y=tmp;}使用函数重载虽......
  • 微信小程序:横向滚动卡片列表模板
    文章目录1前言2代码详解3样例展示4结语1前言在开发微信小程序时,横向可滚动卡片列表是一个必不可缺的页面组件。其不仅美观还可以节省屏幕空间。具体截图如下:2代码详解主要用的是scroll-x,具体代码如下:wxml<scroll-viewscroll-xclass="scroll-x"><viewstyle="display:......
  • 微信小程序:自动生成打卡海报
    文章目录1前言2界面展示3部分代码展示以及原理解释4结语完整项目下载:下载链接1前言在当前的背单词小程序开发中,为满足用户学习完成后的展示需求,计划引入自动生成打卡海报功能,以提升用户参与度与推广效果。除了基本的海报生成功能,还可以考虑以下丰富内容:将用户的学习数据融入......
  • 微信开发之一键搜码佳群的技术实现
    好友将群二维码发送给机器人,机器人调用本接口将自动识别入群请求URL:http://域名地址/scanJoinRoom请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是string登录实例标识url是string群二维码url(二维码解析后的url)type否......
  • 微信开发之一键扫码入群的技术实现
    好友将群二维码发送给机器人,机器人调用本接口将自动识别入群请求URL:http://域名地址/scanJoinRoom请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是string登录实例标识url是string......
  • vue页面对字段进行校验,必填未填则进行提示
    <el-form:model="form"><el-form-itemlabel="等级名称":label-width="formLabelWidth"prop="name":rules="[{required:true,message:'请输入等级名称',trigger:'blur'}]"></el-fo......
  • 记录--vue3问题:如何实现微信扫码授权登录?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、需求微信扫码授权,如果允许授权,则登录成功,跳转到首页。二、问题1、微信扫码授权有几种实现方式?2、说一下这几种实现方式的原理是什么?3、vue中的微信扫码授权登录,与uniapp和原生小程序的微信授权登录,它们......
  • ThingsKit物联网平台可视化工具之组态多页面管理
    概述组态多页面管理是指对组态上的各个页面进行管理和组织的操作。通常情况下,一个组态可以包含多个页面,每个页面可以展示不同的数据、信息或结果。从长图可知,整个页面是由4个子页面构成:数据监控为一页;参数设置为一页;手动操作为一页;I/O监控为一页。多页面管理的实现多页面管......