uni-app（2）

封装request请求，然后添加给Vue.prototype，用this可以使用，主要是为了显示加载中

微信小程序image有个mode属性，可以设置宽高自适应，让高度随宽度变化，不失真

这里后来又用到了aspectFull,索性超链接小程序吧点这里

这里是缩略图，需要改变，将路径中$,替换成240或者其他值来达到缩放，由后台完成这个，我们使用就行

这里将时间戳变成日期，如moment.js库

分页效果

这是uni-app中srcoll-view的一个属性，触底就会触发，但是要注意给定高度

-y那个代表是向下滑动

<scroll-view @scrolltolower="handleToLower" class="recommed_view" scroll-y/>

 .recommed_view{
    
    
    //height:屏幕高度 - 头部标题高度 这里小程序屏幕高是不包含tabbar的，不用担心
    //这里36是测量的 是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度
    //calc动态计算长度，但是注意前后留一个空格
    height: calc(100vh - 36px)
  }

这里因为发送一次只有30个，下次发前面就没，所以后面我们在methods中封装请求的时候，我们采用Es6的写法三点运算符来进行拼接，值得总结是发送请求的的data，代表后台要给你的回应，
这里hasMore就是一些data中的数据 判断到没到底，没什么可说的
全部代码，别忘了这里的request是封装好的，小程序不支持promise，uniapp可以，这里request代码在最上方第一条。

<script>
import moment from 'moment'
export default {
    
    
  data(){
    
    
    return{
    
    
      //推荐列表
      recommends: [],
      //月份
      months:{
    
    },
      //热门
      hots: [],
      //请求的参数
      param: {
    
    
         //要获取几条
        limit: 30,
        //关键字
        order: "hot",
        //要跳过几条
        skip: 0
      },
      //是否还有下一页
      hasMore: true

    }
  },
  methods:{
    
    
    //滚动条触底事件
    handleToLower(){
    
    
      console.log('goudiaole')
      // 1.修改参数 skip代表跳过几条，要加skip += limit
      // 2.发送请求
      // 3.需要将得到的数据拼接到hots上，否则前面的就没了
      if(this.hasMore){
    
    
        this.param.skip += this.param.limit
        this.getList()
      } else {
    
    
        //提示用户没了
        uni.showToast({
    
    
          title: "没有了o(╥﹏╥)o",
          icon: 'none'
        })
      }
    },
    //获取接口数据
    getList(){
    
    
       this.request({
    
    
          url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
          data: this.param
        })
        .then(result=>{
    
    
          //判断还有没有下一页数据
            if(result.res.vertical === 0){
    
    
              this.hasMore = false
              return
            }
          if(this.recommends.length === 0){
    
    
            
            //第一次发送请求
            console.log(result)
            //头部推荐模块
            this.recommends = result.res.homepage[1].items
            //月份模块 
            this.months = result.res.homepage[2]
            //将时间戳 改成 18号、月 moment.js
            this.months.MM = moment(this.months.stime).format('MM')
            this.months.DD = moment(this.months.stime).format('DD')
            console.log(this.months)
          }
          
          //获取热门数据的列表
          this.hots = [...this.hots, ...result.res.vertical]
          console.log(this.hots)
        })
      }
    },
  
  mounted(){
    
    
   this.getList()
  }
}
</script>

喜欢Vue，比较熟悉，今天做的慢点，因为全是手敲的，很多css部分就很繁琐，也挺好的，又熟悉了一下，已经7点啦，要去吃饭了，明天周六依然是充满希望的一天，明天加油！