1.隐藏顶部标题栏
需要在 page的style里写
"app-plus":{
"titleNView":false
}
2.列表底部边框设置
border-bottom: 1px solid rgba(190, 191, 194, .5);
3.绝对位置
.warp {
display: flex;
position: relative;
}
.addStyle {
display: flex;
position: fixed;
bottom: 300rpx;
left: 350rpx;
z-index: 999;
}
4.上拉加载和下拉刷新
Page里加上 “enablePullDownRefresh”: true,
this.totalPage = res._DATA_.count / 20;
if (this.currentPage == 1) {
this.dataList = res._DATA_.data;
} else {
this.dataList = this.dataList.concat(res._DATA_.data);
}
onPullDownRefresh() {
this.loadListData();
uni.stopPullDownRefresh();
},
onReachBottom() {
this.currentPage++;
if (this.currentPage > this.totalPage) {
uni.showToast({
title: '暂无更多数据'
})
} else {
this.loadListData();
}
}
5.左滑删除和页面弹框
<uni-swipe-action>
<uni-swipe-action-item :right-options="options1" @click="showModal(i.ID)">
<view class="lineWarp"></view>
</uni-swipe-action-item>
</uni-swipe-action>
<u-modal :show="showMadal" @confirm="confirm()" @cancel="cancle()" content="确定删除吗?" :closeOnClickOverlay="true"
:showCancelButton="true" width="300rpx"></u-modal>
6.数据转换
// 将数据转化成uni-form-item可以用的格式
getList(res) {
var array = [];
res.map((item) => {
var list = {
"name": "",
"code": ""
};
list.name = item.ITEM_NAME;
list.code = item.ITEM_CODE;
array.push(list)
})
return array
},
// 将数据转化成u-upload可以用的格式
getImgList(res) {
var array = [];
res.map((item) => {
var list = {
"url": "",
};
list.url = item.path_YZ;
array.push(list)
})
return array
}
7.文字换行
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
8.页面view换行
需要在 page的style里写
display: flex;
flex-wrap: wrap;
9.多级页面返回
clickBack() {
const _pages = getCurrentPages()
if (_pages.length < 2) {
uni.webView.postMessage({
data: {
type: 'goBack'
},
});
} else {
uni.navigateBack()
}
},
10.页面传值和跳转
let data = encodeURIComponent(JSON.stringify(this.dataProps))
uni.navigateTo({
url: './search?data=' + data
})
this.dataProps = JSON.parse(option.data);