betway必威-betway必威官方网站
做最好的网站

【必威官方网站】vue实现点击关注后及时更新列

必威官方网站 1

必威官方网站 2

网易云音乐

如图,我要实现点击关注之后列表及时更新成最新的列表。

如图,我要实现点击关注之后列表及时更新成最新的列表。

git地址 https://github.com/majunchang/wangYiYun-Music

思路很简单,主要是两点:

思路很简单,主要是两点:

项目截图

必威官方网站 3

mark

必威官方网站 4

mark

必威官方网站 5

mark

必威官方网站 6

mark

必威官方网站 7

mark

必威官方网站 8

mark

必威官方网站 9

mark

必威官方网站 10

mark

必威官方网站 11

mark

必威官方网站 12

mark

1、在点击关注之后去执行一个请求新的关注列表的action;

1、在点击关注之后去执行一个请求新的关注列表的action;

准备工作

我们使用 jsonp配合node代理 借用了qq音乐接口实现的 音乐播放器

这是jsonp代码

/**
 * Created by majunchang on 2017/7/23.
 */
import originJsonp from 'jsonp'

// 三个参数分别为 目标url 需要拼接在url上的参数 以及jsonp插件 需要的option
export default function jsonp(url,paramdata,options) {
  // 在这里引入一个  拼接字符串的方法
  url  = (url.indexOf('?')< 0 ? '?':'&') param(paramdata);

  // 在这里返回一个Promise对象
  return new Promise((resolve,reject)=>{
    // 在这里的data 跟上面的paramdata是不一样的  一个是 json的返回对象  一个是你传入的参数
    originJsonp(url,options,(err,data)=>{
      if(!err){
        resolve(data)
      }
      else {
        reject(err)
      }
    })
  })
}


function param(paramdata) {
  let url='';
  for(var k in paramdata){
    //  对参数对象里的每一项进行判断
    let value = paramdata[k] ==  undefined ? '': paramdata[k];
    url = `&${k}=${encodeURIComponent(value)}`
  }
  // 循环结束  url 拼接完毕 将其返回
  return url
}

这是配置接口的js

/**
 * Created by majunchang on 2017/7/23.
 */
import jsonp from 'common/js/jsonp'
import {commonParams,options} from './config'
import axios from 'axios'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

  const paramData = Object.assign({},commonParams,{
    platform: 'h5',
    uin: 0,
    needNewCode: 1
  })

  return jsonp(url,paramData,options)
}

// 歌单列表
export function getDiscList() {
  const url='/api/getDiscList';

  // 需要拼接的数据
  const data = Object.assign({},commonParams,{
    platform: 'yqq',
    hostUin: 0,
    sin: 0,
    ein: 29,
    sortId: 5,
    needNewCode: 0,
    categoryId: 10000000,
    rnd: Math.random(),
    format: 'json'
  })

  return axios.get(url,{
      params:data
  }).then((res)=>{
    console.log(res);
    return Promise.resolve(res.data);
  })
}

这是nodejs 代码 仅仅推荐页面 用到了这个axios 其余的都是使用接口配置jsonp实现的

var app = express()
var apiRoutes = express.Router()

apiRoutes.get('/getDiscList',function (req,res) {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
  axios.get(url,{
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params:req.query
  }).then((response)=>{
    res.json(response.data)
  }).catch((e)=>{
    console.log(e);
  })

})
app.use('/api',apiRoutes);

2、在vue组件中watch监听已关注列表和推荐关注列表

2、在vue组件中watch监听已关注列表和推荐关注列表

推荐页面

使用jsonp的方式 获取到数据

 

主要代码如下:

轮播图部分

https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg

部分代码如下:

        <slider>
            <div v-for="item in recommends">
              <a :href="item.linkUrl">
                <img class="needsclick" @load='loadImg' :src="item.picUrl">
              </a>
            </div>
          </slider>

 methods: {
      _initScroll(){
          console.log(this.listenScroll);
        if (!this.$refs.wrapper) {
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click
        })
        if(this.listenScroll){
            let _this = this;
            this.scroll.on('scroll',(pos)=>{
                _this.$emit('scroll',pos);
            })
        }
      }
  1. 使用 better-scroll插件 将轮播图部分抽象成为一个组件 使用solt插槽 往里面填充内容
  2. 使用插件的内容的相关api 和轮播组件里面的 props的 控制图片的轮播速度 间隔时间 和是否轮播 在此基础上 增加dots 也就是图片底部的圆点
  3. 监听window的resize事件 当用户改变屏幕的时候 轮播效果不会发生改变
  4. 访问连接 以及返回格式 数据

主要代码如下:

组件:

歌单列表部分

https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg

  1. 由于qq音乐 对访问对象 做了限制 所以我们通过配置代理的方式 进行访问 npm run dev的时候 会在dev-server中运行 我们结合axios和express框架 配置使用代理
  2. 加入loading组件和懒加载组件 在网速较低的情况下 提高了用户的体验
  3. 后台代理代码
var app = express()
var apiRoutes = express.Router()

apiRoutes.get('/getDiscList',function (req,res) {
  var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg';
  axios.get(url,{
    headers: {
      referer: 'https://c.y.qq.com/',
      host: 'c.y.qq.com'
    },
    params:req.query
  }).then((response)=>{
    res.json(response.data)
  }).catch((e)=>{
    console.log(e);
  })

})
app.use('/api',apiRoutes);

组件:

关注的methods:

歌手页面

分为歌手列表页和歌手详情页 歌手列表页需要做出左右联动 类似于 手机通讯录那样的 歌手详情页要要出模拟原生app的 滑动感觉

本文由betway必威发布于网页设计,转载请注明出处:【必威官方网站】vue实现点击关注后及时更新列

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。