vue项目常用固定套路，改字段名，分页加载数据

vue项目常用固定套路

修改数据字段名（返回新数据） – map

描述：后台传过来的json数据，字段是xingming、sex，但是前端页面需要使用name、gender，于是需要对数据字段进行修改。

let persons = [
    {
        xingming: "杰克", age: 18, id: 5, sex: "男"
    },
    {
        xingming: "李雷", age: 20, id: 2, sex: "男"
    },
    {
        xingming: "韩梅梅", age: 16, id: 9, sex: "女"
    },
    {
        xingming: "汤姆", age: 16, id: 2, sex: "男"
    },
]

var data = persons.map(item => {
    return {
        name: item.xingming,
        gender: item.sex,
    }
})
console.log(data)
/*
[
  { name: '杰克', gender: '男' },
  { name: '李雷', gender: '男' },
  { name: '韩梅梅', gender: '女' },
  { name: '汤姆', gender: '男' }
]
*/

向数据内添加字段（修改原数据） – forEach 、map

描述：后台传过来的json数据，字段是xingming、sex，但是前端页面需要使用name、gender，于是需要对数据字段进行修改。

let persons = [
    {
        xingming: "杰克", age: 18, id: 5, sex: "男"
    },
    {
        xingming: "李雷", age: 20, id: 2, sex: "男"
    },
    {
        xingming: "韩梅梅", age: 16, id: 9, sex: "女"
    },
    {
        xingming: "汤姆", age: 16, id: 2, sex: "男"
    },
]

persons.forEach(item => {
    item.show = false
})
persons.map(item => {
    item.show = false
})
console.log(persons)
/*
[
  { name: '杰克', gender: '男' },
  { name: '李雷', gender: '男' },
  { name: '韩梅梅', gender: '女' },
  { name: '汤姆', gender: '男' }
]
*/

分页加载数据（使用总数量total进行控制）

上滑加载更多和点击下一步加载更多逻辑相同。

// data 
searchForm: {
    pageNumber: 1,
    pageSize: 8,
},
loading: false,
data:[],
total:0,

// methods
getDataList() {
    // 多条件搜索用户列表
    this.loading = true;
    // 避免后台默认值
    getIpList(this.searchForm).then(res => {
        this.loading = false;
        if (res.success) {
            let arr = res.result.records;
            //第一页赋值  其他页数 追加
            this.data = this.searchForm.pageNumber === 1 ? arr : this.data.concat(arr);
            this.total = res.result.total;
        }
    });
},

上滑加载更多数据（使用总页数pages进行控制），【点击查看全部代码】)

//
list: [], //列表
status: 'loadmore',
pageNumber: 1,
pageSize: 10,
pages: 0
// 
mounted() {
    this.init()
    let _this=this
    uni.$on('onReachBottom', function (data) {
        console.log('触底了！',_this.pageNumber);
        if (_this.pageNumber >= _this.pages) return
        _this.status = 'loading'
        _this.pageNumber = ++_this.pageNumber
        _this.getList()
        if (_this.pageNumber >= _this.pages) {
            _this.status = 'nomore'
        } else {
            _this.status = 'loading'
        }
    })
},
//
getList() {
    let param = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
    }
    this.$api.exhibitor.listHot(param).then(res => {
        const {
            success,
            result
        } = res
        if (success) {
            if (result && result.records) {
                let arr = result.records
                //第一页赋值  其他页数 追加
                this.list = this.pageNumber === 1 ? arr : this.list.concat(arr);
                this.pages = result.pages
            }
        }
    })
}