Vue Mobile Music App Development Learning (III): Development of Carousel Diagram components

This series of articles is designed to record the knowledge points in learning, so that they are easy to watch later. If you need a classmate please login to the network, find Vue 2.0 advanced Combat-Develop mobile music webapp to watch, portal.

The completed page status and project structure are as follows:

One: Create a Carousel Diagram component Slider.vue

1: Create a new base folder under Src/base, and then make the Silder.vue:

<template> <div class= "slider" ref= "Slider" > <div class= "slider-group" ref= "Slidergroup" > <s lot> </slot> </div> <div class= "dots" > <span class= "dot": class= "{ACTIVE:CURRENTP Ageindex = = = Index} "v-for=" (item, index) in dots "></span> </div> </div></template><scr IPT type= "text/ecmascript-6" > Import {addclass} from ' Common/js/dom ' import bscroll from ' better-scroll ' export DEFA        ult {name: ' Slider ', props: {loop: {Type:boolean, default:true}, AutoPlay: {    Type:boolean, Default:true}, Interval: {Type:number, default:4000}},        Data () {return {dots: [], currentpageindex:0}}, mounted () {setTimeout (() = { This._setsliderwidth () this._initdots () This._initslider () if (This.autoplay) {this. _play ()}}, Window.addeventlistener (' Resize ', () = {if (!this.slider) {return} This._se Tsliderwidth (True) This.slider.refresh ()})}, activated () {if (this.autoplay) {This._play    ()}, deactivated () {cleartimeout (This.timer)}, Beforedestroy () {cleartimeout (This.timer) }, Methods: {_setsliderwidth (isresize) {This.children = this. $refs. Slidergroup.children Let WID          th = 0 Let Sliderwidth = the $refs. Slider.clientwidth for (Let i = 0; i < this.children.length; i++) { Let child = This.children[i] addclass (Child, ' slider-item ') child.style.width = sliderwidth + ' P        X ' width + = sliderwidth} if (This.loop &&!isresize) {width + = 2 * sliderwidth } this. $refs. SliderGroup.style.width = width + ' px '}, _initslider () {this.slider = new BSc Roll (this. $refs. Slider,{scrollx:true, Scrolly:false, Momentum:false, Snap:true, Snaploop:this.          Loop, snapthreshold:0.3, snapspeed:400}) This.slider.on (' Scrollend ', () = {          Let PageIndex = This.slider.getCurrentPage (). PageX if (this.loop) {pageIndex-= 1} This.currentpageindex = PageIndex if (this.autoplay) {This._play ()}}) thi        S.slider.on (' Beforescrollstart ', () = {if (this.autoplay) {cleartimeout (This.timer)} })}, _initdots () {this.dots = new Array (this.children.length)}, _play () {Let P Ageindex = This.currentpageindex + 1 if (this.loop) {pageIndex + = 1} this.timer = Settimeo UT (() = {this.slider.goToPage (pageIndex, 0, +)}, This.interval)}}}</script><s Tyle scoped lang= "stylus"Rel=" Stylesheet/stylus "> @import" ~common/stylus/variable ". Slider min-height:1px. Slider-group positio N:relative Overflow:hidden white-space:nowrap. Slider-item float:left box-sizing:border- Box Overflow:hidden text-align:center a display:block width:100% overf  Low:hidden text-decoration:none img display:block width:100%. Dots Position:  Absolute right:0 left:0 bottom:12px text-align:center font-size:0. Dot Display: Inline-block margin:0 4px width:8px height:8px border-radius:50% background: $colo R-text-l &.active width:20px border-radius:5px background: $color-text-ll</styl E>

　　

2: The components will contain addclass and hasclass operations, but there is no jquery, but the native JS encapsulates the two methods. Create a new dom.js under Src/common/js:

Export function Hasclass (EL, className) {let  reg = new RegExp (' (^|\\s) ' + ClassName + ' (\\s|$) ')  return Reg.test ( El.classname)}export function addclass (el, className) {  if (Hasclass (el, ClassName)) {    return  }  let Newclass = El.className.split (")  Newclass.push (className)  el.classname = Newclass.join (')}

3: Page data is used JSONP cross-domain request QQ music data. GitHub Address: Portal. Next we create a new jsonp.js under Src/common/js to encapsulate the common Jsonp method:

Import Originjsonp from ' JSONP ' export default function Jsonp (URL, data, option) {  URL + = (url.indexof ('? ') < 0?) '? ': ' & ') + param (data)  return new Promise ((resolve, reject) = {    Originjsonp (URL, option, (Err, data) =&G T {      if (!err) {        Resolve (data)      } else {        reject (err)}}  )})}export function param (data) { Let  url = "for  (var. k in data) {let    value = data[k]!== undefined? Data[k]: '    url + = ' & ' + K + ' = ' + encodeuricomponent (value)  }  return URL? url.substring (1): '}

　　

4: When we request data asynchronously, there will generally be some common parameters, so we can define these common parameters as constants. Create a new config.js under Src/api:

Export Const COMMONPARAMS = {  g_tk:1928093487,  incharset: ' Utf-8 ',  outcharset: ' Utf-8 ',  notice:0 ,  format: ' JSONP '}export const options = {  param: ' jsonpcallback '}export const ERR_OK = 0

4: Defines the file that gets the carousel graph data. Create a new recommend.js under Src/api:

Import Jsonp from ' Common/js/jsonp ' import {commonparams, options} from './config ' export function Getrecommend () {  Const URL = ' HTTPS://C.Y.QQ.COM/MUSICHALL/FCGI-BIN/FCG_YQQHOMEPAGERECOMMEND.FCG '  const data = Object.assign ({}, Commonparams, {    platform: ' h5 ',    uin:0,    neednewcode:1  })  return Jsonp (URL, data, options)}

5: Modify Recommend.vue:

<template> <div class= "recommend" ref= "recommend" > <div class= "recommend-content" > <div v-if= " Recommends.length "class=" Slider-wrapper "ref=" Sliderwrapper "> <slider> <div v-for=" item in Recomm Ends "> <a:href=" Item.linkurl ">  </a> </div> </slider> </div> </div> </div></temp Late><script type= "text/ecmascript-6" > Import Slider from ' Base/slider/slider ' import {getrecommend} from ' API    /recommend ' Import {ERR_OK} from ' Api/config ' export default {data () {return {recommends: []} }, created () {this._getrecommend ()}, methods: {_getrecommend () {getrecommend (). then (res) =      > {if (res.code = = = Err_ok) {this.recommends = Res.data.slider}})}, LoadImage () {if (!this.checkloaded) {this.checkloaded = True this. $refs. Scroll.refresh ()}}, Compon Ents: {Slider}}</script><style scoped lang= "Stylus" rel= "Stylesheet/stylus" > @import "~common/stylu S/variable ". Recommend position:fixed width:100% top:88px bottom:0. Recommend-content height:100 % Overflow:hidden. Slider-wrapper position:relative width:100% Overflow:hidden. Re Commend-list. List-title height:65px line-height:65px text-align:center Font          -size: $font-size-medium color: $color-theme. Item Display:flex Box-sizing:border-box  Align-items:center padding:0 20px 20px 20px. Icon flex:0 0 60px Width:            60px padding-right:20px. Text Display:flex flex-direction:column Justify-content:center           Flex:1 line-height:20px overflow:hidden font-size: $font-size-medium . Name margin-bottom:10px color: $color-text. Desc Color: $color-te xt-d. Loading-container position:absolute width:100% top:50% Transform:translatey (-50 %) </style>

Vue Mobile Music App Development Learning (III): Development of Carousel Diagram components