uni-app （2）

Encapsulate the request request and add it to Vue.prototype. This can be used, mainly to show that the
Insert picture description here
WeChat applet image has a mode attribute that can be set to adapt to the width and height, so that the height changes with the width without distortion.

This will be used later. When it comes to aspectFull, simply hyperlink the applet here.

Here is the thumbnail. You need to change it. Replace the $ in the path with 240 or other values to achieve zooming. This is done in the background, we just use it
Insert picture description here
here to change the timestamp into a date. Such as moment.js library

Paging effect

This is an attribute of srcoll-view in uni-app, it will be triggered when it hits the bottom, but it should be noted that the given height
Insert picture description here
-y represents a downward slide

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

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

Here, because there are only 30 sent at a time, there will be no before the next sending, so when we encapsulate the request in the methods later, we use the three-point operator written in Es6 for splicing. It is worth summarizing that the requested data is sent, which represents the background. I want to give you a response,
here hasMore is some data in the data judged to the end, there is nothing to say about
all the code, don’t forget that the request here is encapsulated, the applet does not support promises, uniapp is OK, here the request code is in The first one at the top.

<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>

I like Vue, I am more familiar with it. I did it slowly today because it was all hand-knocked. A lot of the css part is very cumbersome and good. I am familiar with it again. It is already 7 o’clock. I’m going to eat. I will still be there tomorrow Saturday. It's a day full of hope, come on tomorrow!

Paging effect

Guess you like