uniapp小笔记

1.创建项目 vue create -p dcloudio/uni-preset-vue dnpicture

2安装 sass依赖 npm install sass-loader@7.3.1 node-sass@4.14.1

3.getApp().globalData 可以设置全局变量

4.在scroll-view 里做了flex布局需要添加 enable-flex才能使display:flex生效

getList(){
            this.request({
                url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
                data: this.params
            }).then(result => {
                // console.log(result);
                if(Object.keys(this.album).length === 0){
                    this.album = result.res.album;
                }

                if(result.res.wallpaper.length ===0){
                    this.hasMore = false;
                    uni.showToast({
                        title: '没有更多数据了',
                        icon:'none'
                    });
                    return
                }
                    this.wallpaper = [...this.wallpaper, ...result.res.wallpaper];
            })
        }

// 页面触底上拉加载下一页事件

onReachBottom(){

// console.log('22');

if(this.hasMore){

this.params.first = 0;

this.params.skip += this.params.limit;

this.getList();

}else{

uni.showToast({

title: '没有更多数据了',

icon:'none'

});

}

5.以上代码是做了一个分页的效果，多次请求图片然后通过展开运算符添加到数组中，如果是有2个以上的tab栏目需要把数组清空 skip重置为0 然后重新发送请求

6.// 修改页面的标题uni.setNavigationBarTitle({title: '最新' });

7.引入moment.js 可以实现一些时间的转换

import moment from "moment";

this.monthes = res.res.homepage[2];

// 将时间改成 18号 moment.js

this.monthes.MM = moment(this.monthes.stime).format('MM');

this.monthes.DD = moment(this.monthes.stime).format('DD');

import {uniSegmentedControl} from '@dcloudio/uni-ui' 分段器的使用

9. 组件封装的重要性

uniapp小笔记

推荐阅读