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

时间： 2024-11-01 20:51:01

vue慕课网音乐项目手记：6-手写滚动轮播图（中）的相关文章

vue慕课网音乐项目手记：5-手写滚动轮播图（上）

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

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就会重新计算

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慕课网音乐项目手记：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慕课网音乐项目手记：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

手写angular轮播图（手机端无缝版）

代码地址: http://files.cnblogs.com/files/fxnet/%E6%89%8B%E5%86%99angular%E8%BD%AE%E6%92%AD%E5%9B%BE%EF%BC%88%E6%89%8B%E6%9C%BA%E7%AB%AF%E6%97%A0%E7%BC%9D%E7%89%88%EF%BC%89.zip <html><head> <meta name="viewport" content="initial-s

jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{padding: 0;margin: 0;list-style-type: none;} .wrap{width: 520px;height: 280px;margin: 50px auto;} .ba

Javascript知识汇总------手写jq轮播图插件（2018-04-23 17:16）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con