共计 2082 个字符，预计需要花费 6 分钟才能阅读完成。
一、封装请求和发送请求 1. 封装 axios
import axios from ‘axios’
const host = ‘http://localhost:3000’
import Qs from ‘qs’
var Net = {
// 请求问题接口
getqueslist(cp_id, c_id, type, page) {
return new Promise(function(resolve, reject) {
axios
.get(`${host}/api/question/list`, {
params: {
cp_id,
c_id,
type,
page
}
})
.then(function(res) {
res.data.code == 0 ? resolve(res) : reject(‘ 错误:’, res.status)
})
})
},
collect(user_id, q_id) {
return axios.post(
`${host}/api/favourite/add`,
Qs.stringify({
user_id,
q_id
})
)
},
}
export default Net
2. 组件调用接口
import Net from ‘@/pages/api/net’
export default {
async asyncData() {
let res1 = await Net.getanswerList()
let res2 = await Net.getcard()
let res3 = await Net.getSort()
res3.data.data.splice(4, res3.data.data.length – 4)
return {
answerList: res1.data.data,
cardList: res2.data.data[0].banner_list,
sortList: res3.data.data
}
}
}
二、nuxt 使用 swiper
<template>
<div>
<div class=”answerpeople”>
<div class=”peoplediv” v-if=”answerList.length>0″ v-swiper:mySwiper=”swiperOption”>
<div class=”swiper-wrapper”>
<div :key=”index” class=”swiperdiv swiper-slide” v-for=”(item,index) of answerList”>
<img :src=”item.headImg” alt>
<p>{{item.nickname}} 正在疯狂刷题中 </p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from ‘vue’
import ‘swiper/dist/css/swiper.css’
if (process.browser) {
const VueAwesomeSwiper = require(‘vue-awesome-swiper/dist/ssr’)
Vue.use(VueAwesomeSwiper)
}
export default {
props: {
answerList: {
type: Array,
required: true
}
},
data() {
return {
swiperOption: {
direction: ‘vertical’,
slidesPerView: 3,
loop: true,
observeParents: true,
observer: true,
autoplay: {
disableOnInteraction: false,
delay: 1000
}
}
}
}
}
</script>
<style lang=”stylus” scoped>
.answerpeople
margin-top 0.8rem /* 30/37.5 */
padding 0rem 0.533333rem /* 20/37.5 */
margin-bottom 2.4rem /* 90/37.5 */
font-size 13px
.peoplediv
background-image url(‘http://xd-video-pc-img.oss-cn-beijing.aliyuncs.com/xearn.png’)
background-repeat no-repeat
background-size 100%
height 3.653333rem /* 137/37.5 */
overflow hidden
border-radius 8px
.swiperdiv
display flex
height 0.8rem /* 30/37.5 */ !important
padding 0.133333rem /* 5/37.5 */ 0rem
background-color rgba(255, 255, 255, 0.73)
border-radius 15px
margin-bottom 5px
img
width 0.8rem /* 30/37.5 */
height 0.8rem /* 30/37.5 */
border-radius 100%
margin-right 5px
p
align-self center
</style>
