精华内容
下载资源
问答
  • 2021-04-23 16:53:10

    Vue ,Js,前端实现排行榜前三动态切换图标

    这可能是个小功能,但是就是想记录一下,希望能帮到你
    效果图
    在这里插入图片描述
    这个功能或许还是比较常见,但是网上好像暂时没有过多的案例,所以做个记录

    <template>
    //主体
     <div v-for="(item,id) in classLister" :key="id" class="studentslister">
                <div v-if="id === 0">
                    <img src="../../../assets/newIndex/rank01.png" />
                </div>
                <div v-else-if="id === 1">
                    <img src="../../../assets/newIndex/rank02.png" />
                </div>
                <div v-else-if="id === 2">
                    <img src="../../../assets/newIndex/rank03.png" />
                </div>
                <div v-else class="icons">{{item.rank}}</div>
                <div>{{item.sumScore}}</div>
                <div>{{item.NAME}}</div>
         </div>
    
    </template>
    <script>
    export default{
        data(){
            return{
                //要渲染的那个数组
                classLister:[ ],
             }
         },
          created() {
             this.getClass();
        },
         methods:{
          //请求数据接口
         getClass(){
               getClsssNames().then((res) =>{   //自己封装的接口
                 res.data.forEach(e =>{
                    this.classNamelist.push(e)
                 })
               })
            },
         }
       }
    </script>
    
    更多相关内容
  • vue实现滚效果

    千次阅读 2020-10-12 10:04:04
    前言:基于vue做一个类似于比赛滚的榜单 要实现这个效果需要用到vue里面的一个组件– vue-seamless-scroll使用这个插件相对而言实现起来比较容易。 想要了解更多可点击 ...

    前言:基于vue做一个类似于比赛滚榜的榜单

    在这里插入图片描述

    要实现这个效果需要用到vue里面的一个组件–

    vue-seamless-scroll使用这个插件相对而言实现起来比较容易。

    想要了解更多可点击

    https://github.com/chenxuan0000/vue-seamless-scroll

    安装和导入vue-seamless-scroll

    NPM安装:

    npm install vue-seamless-scroll --save
    

    CDN安装:

    https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js
    

    在main.js中导入

    import scroll from 'vue-seamless-scroll'
    Vue.use(scroll)
    

    滚榜组件的完整代码如下:

    <template>
      <div class="scollbox">
        <vue-seamless-scroll :data="List" class="seamless-warp" :class-option="classOption">
          <ul>
             <li class="DataList_top" v-for="(item,index) in List" :key="index">
                <div class="DataList_left one">{{index+1}}</div>
                <div class="DataList_left two">{{item.name}}</div>
                <div class="DataList_left three">{{item.question}}</div>
                <div class="DataList_left four">{{item.times}}</div>
                <div class="DataList_left five">{{item.state}}</div>
              </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </template>
     
    <script>
    import vueSeamless from 'vue-seamless-scroll'
    export default {
        data() {
          return{
            List:[
              {name:'杭州试试事实上十三水节省',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和辅导费点所发生的函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数U盾感觉到更好地为将读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
              {name:'fffff',question:'问题和函数读到呼和',times:'2020-90-9',state:'已办理'},
            ]
          }
        },
        components: {    //组件
            vueSeamless
        },
        computed: {
     
         classOption () {
           return {
            step: 1, // 数值越大速度滚动越快
            limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
            hoverStop: true, // 是否开启鼠标悬停stop
            direction: 1, // 0向下 1向上 2向左 3向右
            openWatch: true, // 开启数据实时监控刷新dom
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 1000 ,// 单步运动停止的时间(默认值1000ms)
            autoPlay:true
          }
        }
      },
    }
     
     
    </script>
     
     
    <style scoped>
    .seamless-warp{
      width: 100%;
      height: 18rem;
      overflow: hidden;
    }
    ul{
      padding: 0;
    }
    .DataList_top{
      list-style: none;
      width: 100%;
      height: 4rem;
      background-color: #4383C1;
      margin-top: 0.5rem;
      color: white;
      font-size: 1rem;
      display: flex;
      align-items: center;
    }
    .DataList_left{
      float: left;
      text-align: center;
    }
    .one{
      width: 8%;
    }
    .two{
      width: 26%;
      margin-left: 1%;
    }
    .three{
      width: 29%;
      margin-left: 1%;
    }
    .four{
      width: 19%;
      margin-left: 1%;
    }
    .five{
      width: 14%;
      margin-left: 1%;
      color: greenyellow;
    }
    
    
    </style>
    
    

    其他的样式布局可以根据需求改动

    一些小问题:

    • 首尾没有做到无缝衔接(有距离)
    • pc端不能手动拖动
    展开全文
  • 四、配置排行榜详情页面路由 # router--&amp;gt;index.js 配置子路由 { path: '/rank', name: 'Rank', component: Rank, children:[{ //配置动态子路由 path: '/rank/:id', name: 'RankDe...

    大概步骤:

    在这里插入图片描述

    目标效果

    在这里插入图片描述


    四、配置排行榜详情页面路由

    # router-->index.js 配置子路由
    
    {
          path: '/rank',
          name: 'Rank',
          component: Rank,
          children:[{	//配置动态子路由
            path: '/rank/:id',
            name: 'RankDetail',
            component: RankDetail,
          }]
        },
    
    # rank.vue
    
    <div>
    	<!--排行榜首页-->
    	<scroll>
    		<ul><li @click="selectRank(item)"></li></ul>
    	</scroll>
    	<!--详情页路由-->
    	<router-view />
    </div>
    
    # rank.vue  点击li触发跳转路由事件
    
    selectRank(item){
    	this.$router.push({
    		path:`/rank/${item.id}`	//push一个对象,写path路径
    	})
    

    在这里插入图片描述


    项目来源:慕课网
    如有建议和疑问可联系
    QQ:1017386624
    邮箱:1017386624@qq.com

    展开全文
  • Vue音乐--排行榜页面08_优化

    千次阅读 2018-10-06 15:23:49
    详情页面头部图片换成第一首歌曲的图片(排行榜图片有字不适用) 收费歌曲,无法播放,获取不到url,弹出弹窗 排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据 (1)歌曲列表添加排名符号 ...

    大概步骤:

    在这里插入图片描述

    目标效果

    在这里插入图片描述


    八、优化

    • 要点
      • 给排行榜歌曲列表添加排名符号
      • 刷新的时候返回路由rank
      • 详情页面头部图片换成第一首歌曲的图片(排行榜图片有字不适用)
      • 收费歌曲,无法播放,获取不到url,弹出弹窗
      • 排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据

    (1)歌曲列表添加排名符号

    • 因为是公共组件,所以,以父子组件传入标记为是否show
    • 在公共组件中加入相关dom
    # SongList.vue
    
    <!--排名图标,动态显示-->
    <div class="songlist-rank" v-show="rank">
    	<span :class="_getRankCls(index)">{{_getRankText(index)}}</span>
    </div>
    

    动态根据当前序列添加css样式和文字内容

    # SongList.vue
    
    /******动态样式,排名前三名图标******/
    //添加class给span样式,即添加图片或者文字样式
    _getRankCls(index){
    	if(index<=2){
    		return `songlist-rank_icon songlist-rank_icon${index}`	//前三名添加的class是图片样式
    	}else{
    		return 'songlist-rank_text'	//后面的样式是文字样式
    	}
    },
    //添加文字的方法
    _getRankText(index){
    	if(index>2){
    		return index+1		//前三名之后的会有当前名次的文字
    	}
    }
    
    .songlist-rank_icon{
        display: inline-block;
        width: 25px;
        height: 24px;
        margin:auto 0;
        background-size: 25px 24px;
      }
    .songlist-rank_icon0{
    	background-image: url(../../../assets/styles/logo/first@3x.png);
      }
      .songlist-rank_icon1{
        background-image: url(../../../assets/styles/logo/second@3x.png);
      }
      .songlist-rank_icon2{
        background-image: url(../../../assets/styles/logo/third@3x.png);
      }
      .songlist-rank_text{
        margin:auto 0;
        font-size: 16px;
        color: #31c27c;
      }
    
    • 最后是这个排名序列是否要展示,取决于使用这个公共组件的那方

    • 因此加入一个props,设置默认值为false不展示,要show就传入这个prop来

    • 需要注意的是本地图片的路径要用相对路径写,(待找到更好的引用本地图片路径的方法)

    • 这种根据图片序列动态添加图片的方法,要记住
      在这里插入图片描述


    (2)刷新页面,返回路径

    • 比较常用的小技巧
    • 在获取数据的时候,刷新是不会传入数据的,即判断有无传入数据
    • 无数据就 $ router.back() 或者 $ router.push({path:’…/…/’})
    # rankDetail.vue
    
    _getRankList(){
    	//判断是否有传入的数据,没有就返回路由
    	if(!this.topList.id){
    		this.$router.back()
    		return
    	}
    	//获取数据方法
    	getRankList(this.topList.id).then((res)=>{
    		if(res.code === ERR_OK){
    		this.songs = this._normalizeSongs(res.songlist)
    		}
    	})
    },
    

    (3)图片更换成第一首歌的图片

    • 有歌曲数据,定义计算属性传入就可以了
    • 判断歌曲数据获取到了,否则会是空
    # RankDetail.vue
    
    bgimg(){
          if(this.songs.length){
            return this.songs[0].image
          }
        },
    

    在这里插入图片描述


    (4)收费歌曲,无法播放,获取不到url,弹出弹窗

    • 待优化

    (5)排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据

    • 待优化

    项目来源:慕课网
    如有建议和疑问可联系
    QQ:1017386624
    邮箱:1017386624@qq.com

    展开全文
  • 排行榜开发的时候,前三名的样式不同,其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api,一下子就做出来了。   就是不同名次上边的样式根据实际情况...
  • 这是一款视觉效果非常漂亮的vue数字阶梯排序动画特效,冒泡的数字阶梯顺序排列可视化工具效果。
  • 前言:以下内容均为学习慕课网高级...歌单及详情页 排行榜及详情页 一、歌单详情页开发 歌单详情页布局介绍及Vuex实现路由数据通讯 components->disc目录下:创建disc.vue router->index.js中:给Recommend...
  • 仿网易音乐VUE项目

    2020-08-06 22:09:15
    55. 排行榜 56. 歌手榜 57. 云盘 58. 电台 - 推荐 59. 电台 - 分类 60. 电台 - 分类推荐 61. 电台 - 订阅 62. 电台 - 详情 63. 电台 - 节目 64. 给评论点赞 65. 获取动态 66. 热搜列表(简略) 67. 发送私信 68. 发送...
  • vue+echarts 图表排名

    2021-09-18 14:14:36
    <template> <div> <div class="gcbodyblock6" style="position: relative"> <div class="box" style=" overflow-y: scroll; margin-top: 3px; margin-left: 15px;... font-size: .
  • vue对表格进行排名排序

    千次阅读 2022-04-27 10:37:21
    使用vue或者js都可以完成 效果图: 第一步: 对数组进行简单的排序 this.tableData.forEach(r=>{ if(r.rank==null) r.rank=0 })//将值为null的变为0 this.tableData.sort(function(a, b){ return a.rank - b....
  • 最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据,但是在其他浏览器没问题,我然后打开控制台一看,发现有问题,纠结了半天才捣腾好,下面小编把方案分享处理,供大家选择
  • 排行榜开发的时候,前三名的样式不同,其余的样式一样。但是都是通过同一元素来遍历的,当时卡了一下。后来发现有module模块化这一概念,于是查了下api,一下子就做出来了。 (此图片来源于网络,如有侵权,请联系删除!...
  • 【课程导图】     【教学设计】       课程采用番茄教学法,安装人脑记忆力和思维导图的方式+实战例子=完成课程授课,每一个课时可以独立观看,且可以利用碎片化学习,让你悄悄强大,弯道...
  • vue动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容//router内的设置{path: '/teachers',name: 'TDetail'...
  • v-circle:用Vue.js实现一个的圆形进度条
  • app.vue <template> <div> <!-- 组件传参:数组类型 --> <!-- <my-list items="skills" /> --> <my-list :items="skills" /> <!-- 组件的最大用途: 复用性 - 界面...
  • 【音乐App】—— Vue-music 项目学习笔记:歌单及排行榜开发 前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记。 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star。 ...
  • 1.动态设置div的class 可以通过传给:class一个对象,以动态地切换class <div :class="{ active: isActive,'text-danger': hasError }"></div> 上面表示active这个class是否存在。取决于数据...
  • 用户博客中心:发布,更新,删除,评论,点赞,收藏,转发,排行榜已经完成。博客中心是博客的核心,分页和轮滑加载均实现,用Redisson来实现分布式锁控制文章 搜索引擎中心:文章提示信息的增删改查,分页,高亮...
  • https://blog.csdn.net/seeeeeeeeeee/article/details/119238244
  • 前端技术栈:Vue-Cli 前端软体:WebStorm 2020.3 前端样式: Bootstrap; Element-UI 二、文章主题 内容概述:为将Project07与SpringSecurity/Shiro+jwt整合,主要参考了MarkerHub_前后端分离后台管理系统进行改写...
  • GTD数据分析及可视化项目的第三张图表,项目总体介绍见这篇文章。 最终效果 这种图经常能在B站上一些国家GDP,企业排名的可视化视频上看到,感觉效果还是比较好的。话说这种图是叫排名图?赛跑图?...
  • vue/css列表无限滚动轮播,可接受动态赋值 1.先上效果图 2.先上效果图
  • 作为开发的必备工具,编程语言的发展动态向来是开发者关心的重点方向之一。因此,有抱负的开源者和企业家的机会不断涌现,竞相入局。期待JavaScript带来的新世界! 原文链接:The State of JS 2021
  • /** 隐藏超出的内容 **/ } </style> 2、动态数据请求及渲染 在动态数据请求之前我们要先打开本地的后台项目,在之前的笔记中已经给出了,有问题可以私信,这里不详细解释。 1、 在src/api/home.js文件中封装请求...
  • 作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用。前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强。对于Vue而言,模块化的体现集中在组件之上,以组件为单位...
  • Jinkey原创感谢 showonne、yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example什么是 VueVue 是一个前端框架,特点是数据绑定比如你改变一个输入框 Input 标签的...
  • vue中实现动画效果--三种方式

    千次阅读 2020-06-12 20:14:56
    二、Vue 默认css类名实现简单动画效果 实现原理 vue 提供了一个 transition 组件, 可以用来包裹想要添加动画的 dom, 可以带有 name 属性作为动画名 内容 被包裹的 dom 在 v-if / v-show 等显示和隐藏的时候, vue 会...
  • 需要的功能:数据自动无缝隙播放滚动,鼠标移动上去:停止滚动,鼠标移开:接着滚动 框架:vue 最终效果: 逻辑: 1:列表使用ul>li展示 2:使用两个ul实现无缝衔接功能 ...XXXXXX销售排行榜</span> .

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 817
精华内容 326
关键字:

vue 动态排行榜