vue慕课网音乐项目手记:52-搜索列表scroll的实现以及scroll底部距离的刷新

首先引入scroll组件,然后使用:

<scroll class="shortcut" :data="shortcut" ref="shortcut">

这里的data是computed计算的来的,因为scroll里面有两组数据:

    shortcut () {
      return this.hotKey.concat(this.searchHistory)
      // 当hotKey和History有一个发生变化的时候。computed就会重新计算。
    }

  而当query从有到无的时候,scroll不能自动刷新。所以需要做一点优化:

watch: {
    query (newQuery) {
      if (!newQuery) {
        // 当query从有到无的时候,手动刷新以下scroll
        setTimeout(() => {
          this.$refs.shortcut.refresh()
        })
      }
    }
  }

  底部距离的刷新

import { playListMixin } from ‘common/js/mixin‘

mixins: [playListMixin],

handlePlayList (playList) {
      const bottom = this.playList.length > 0 ? ‘60px‘ : 0
      this.$refs.shortcutWrapper.style.bottom = bottom
      this.$refs.shortcut.refresh()
      this.$refs.searchResult.style.bottom = bottom
      this.$refs.suggest.refresh()
    },

  

原文地址:https://www.cnblogs.com/catbrother/p/9179445.html

时间: 2024-11-07 22:52:54

vue慕课网音乐项目手记:52-搜索列表scroll的实现以及scroll底部距离的刷新的相关文章

vue慕课网音乐项目手记:48-搜索历史数据的处理

因为搜索关键词在多个模块都有使用,所以要在vuex里面去定义和修改. state设置: searchHistory: [] 然后是mutation和types [types.SET_SEARCH_HISTORY] (state, history) { // history接收一个数组 state.searchHistort = history } export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY' 然后是getters export co

vue慕课网音乐项目手记:6-手写滚动轮播图(中)

active的样式 &.active width: 20px border-radius: 5px background: $color-text-ll 这里有一个问题就是betterscroll在1.0以后的是没有snapLoop的. 所以我安装了0.1.15版本 自动轮播如下 原文地址:https://www.cnblogs.com/catbrother/p/9181079.html

vue慕课网音乐项目手记:9-封装一个公用的scroll组件

知道disable是干什么的了,如果不加,scroll的高度会高于内容的高度. <template> <div ref="wrapper"> <slot></slot> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { // probeType: 1 滚动的时候会派发scro

vue慕课网音乐项目手记:5-手写滚动轮播图(上)

在这一节,会封装一些公用的函数来添加classname,改变image的宽度. 具体如下: 首先:封装一个slider的组件 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> <slot></slot> </div> <d

vue慕课网音乐项目手记:30-音乐环形进度条的实现

环形进度条是基于svg实现的. <template> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- wi

vue慕课网音乐项目手记:50-搜索列表的点击删除、删除全部的交互事件

<li class="search-item" v-for="(item, index) in searches" :key="index" @click="selectItem(item)"> selectItem (item) { this.$emit('select', item) }, search组件里面调用: <search-list :searches="searchHistory&q

Vue 实现的音乐项目 music app 知识点总结分享

其他 此应用的全部数据来自 QQ音乐,利用 axios 结合 node.js 代理后端请求抓取 全局通用的应用级状态使用 vuex 集中管理 全局引入 fastclick 库,消除 click 移动浏览器 300ms 延迟 页面是响应式的,适配常见的移动端屏幕,采用 flex 布局 疑难总结 & 小技巧 关于 Vue 知识 & 使用技巧 v-html 可以转义字符,处理特定接口很有用 watch 对象可以观测 属性 的变化 像这种父组件传达子组件的参数通常都是在data()里面定义的,为什

关于开源项目侧边栏字母搜索列表ListViewFilter的bug解决办法

很多人用过ListViewFilter这个开源列表,做得确实相当不错,但是在使用的过程中好像有点bug,当点击右侧的字母时,总是会触发列表中的某一项的点击事件,这里就给出这个bug的解决办法,主要是IndexBarView.java和PinnedHeaderListView.java这两个文件: 1. PinnedHeaderListView.java public class PinnedHeaderListView extends ListView implements IIndexBarF

2018年慕课网视频教程(vue、react,docker、python、java、Go语言)

如需下述哪一个课程,加QQ: 3475362830,非免费,几大洋,非诚勿扰! Go语言实战流媒体视频网站基于Golang协程实现流量统计系统Google资深工程师深度讲解Go语言 java深入微服务原理改造×××销售平台BAT大牛亲授 基于ElasticSearch的搜房网实战java企业级电商项目架构演进之路Tomcat集群与Redis分布式Spring Boot企业微信点餐系统Java开发企业级权限管理系统SSM到Spring Boot-从零开发校园商铺平台Spring Security开