1.uni-app官网
uni-app官网地址: <https://uniapp.dcloud.net.cn/>
2.轮播图
template详情
<template> <view class="u-demo-block"> <view class="uni-margin-wrap" > <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <block v-for="(item,index) in imgs" :key="index"> <swiper-item > <image class="swiper-item" :src="item"></image> </swiper-item> </block> </swiper> </view> </view></template>
script详情
<script> export default { data() { return { imgs: [ 'http://p1.music.126.net/0BO8Vb36psFJ2GHpBFbFCQ==/109951167851767968.jpg?imageView&quality=89', 'http://p1.music.126.net/pN4THd1FdcFezaxpXpZk2w==/109951167851777214.jpg?imageView&quality=89', 'http://p1.music.126.net/li4_CBhiROFq0GAhOT5Yrg==/109951167851780906.jpg?imageView&quality=89', 'http://p1.music.126.net/kZV0r0sdeuuH0vLA4b_tOg==/109951167851789180.jpg?imageView&quality=89' ], indicatorDots: true, autoplay: true, interval: 2000, duration: 500, swiperList:[], } }, onShow(){ //调用函数 this.loadSwiper() }, methods: { changeIndicatorDots(e) { this.indicatorDots = !this.indicatorDots }, //请求后台数据的方法 // async loadSwiper(){ // let ret = await uni.$get('地址后缀名') //定义空数组去接收后台数据 // this.swiperList = ret // } } }</script>
$get请求方法的封装
新建utils文件，在文件下面新建request.js文件
let $request = (url,data,method="GET")=>{ return new Promise((resolve,rejects)=>{ uni.request({ //地址 url:'http:///192.168.88.102:18080/' url, method, data, success:({data})=>{ resolve(data) } }) })} let $get = (url,data)=>{ return $request(url,data,'GET')}let $post = (url,data)=>{ return $request(url,data,'POST')}uni.$request = $requestuni.$get = $getuni.$post = $post
创建完成后，在main.js中引入request.js文件
//导入request.jsimport '@/utils/request.js'
CSS样式布局
<style lang="scss"> .uni-margin-wrap { width: 690rpx; width: 100%; } .swiper { height: 300rpx; } .swiper-item { display: block; height: 300rpx; line-height: 300rpx; text-align: center; }</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。