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'); 8. import {uniSegmentedControl} from '@dcloudio/uni-ui' 分段器的使用 9. 组件封装的重要性