轮播图优化:
1.http请求优化 2. 方法写到methods调用 3. 用async await同步写法
This commit is contained in:
		
							parent
							
								
									d9ad531212
								
							
						
					
					
						commit
						2228c66b07
					
				@ -7,7 +7,7 @@
 | 
			
		||||
 | 
			
		||||
    <!-- 2.轮播图 -->
 | 
			
		||||
    <view class="swiper">
 | 
			
		||||
      <u-swiper :list="list" height="340" border-radius="0"></u-swiper>
 | 
			
		||||
      <u-swiper :list="swiperList" height="340" border-radius="0"></u-swiper>
 | 
			
		||||
    </view>
 | 
			
		||||
 | 
			
		||||
	</view>
 | 
			
		||||
@ -17,47 +17,25 @@
 | 
			
		||||
	export default {
 | 
			
		||||
		data() {
 | 
			
		||||
			return {
 | 
			
		||||
        list: [
 | 
			
		||||
          // {
 | 
			
		||||
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
 | 
			
		||||
					// 	title: '昨夜星辰昨夜风,画楼西畔桂堂东'
 | 
			
		||||
					// },
 | 
			
		||||
					// {
 | 
			
		||||
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
 | 
			
		||||
					// 	title: '身无彩凤双飞翼,心有灵犀一点通'
 | 
			
		||||
					// },
 | 
			
		||||
					// {
 | 
			
		||||
					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
 | 
			
		||||
					// 	title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
 | 
			
		||||
					// }
 | 
			
		||||
				]
 | 
			
		||||
        swiperList: []
 | 
			
		||||
			}
 | 
			
		||||
    },
 | 
			
		||||
    // 页面生命周期
 | 
			
		||||
		onLoad() {
 | 
			
		||||
      uni.request({
 | 
			
		||||
        url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
 | 
			
		||||
      })
 | 
			
		||||
      // .then(console.log)
 | 
			
		||||
      //promise会传递参数给它
 | 
			
		||||
      .then(res=>{
 | 
			
		||||
        const message = res[1].data.message
 | 
			
		||||
        // 方法1
 | 
			
		||||
        /* 
 | 
			
		||||
        message.forEach(v => {
 | 
			
		||||
          v.image = v.image_src
 | 
			
		||||
        })
 | 
			
		||||
        this.list = [...message]
 | 
			
		||||
        */
 | 
			
		||||
        //方法2
 | 
			
		||||
        this.list = message.map(v=>({
 | 
			
		||||
          ...v,image:v.image_src
 | 
			
		||||
        }))
 | 
			
		||||
        //箭头函数后面跟({}), 就不会把大括号解析成语句块的开始, 而是对象的一部分,()包起来, 相当于return
 | 
			
		||||
      })
 | 
			
		||||
      this.getSwiper();
 | 
			
		||||
		},
 | 
			
		||||
		methods: {
 | 
			
		||||
      // getSwiper(){
 | 
			
		||||
      //   this.$u.get("/home/swiperdata")
 | 
			
		||||
      //   .then(res=>{
 | 
			
		||||
      //       this.swiperList = res.message.map(v=>({...v,image:v.image_src}))
 | 
			
		||||
      //     })
 | 
			
		||||
      // }
 | 
			
		||||
 | 
			
		||||
      async getSwiper(){
 | 
			
		||||
        const { message } = await this.$u.get("/home/swiperdata")
 | 
			
		||||
        this.swiperList = message.map(v=>({...v,image:v.image_src}))
 | 
			
		||||
		  }
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user