uniapp常用tips

1.常用样式

    .flex-display{display: flex;}
	.flex-center{display: flex;justify-content: center;}
	.flex-items{display: flex;align-items:center;}
	.flex-items-plus{display: flex;justify-content: center;align-items:center;}
	.flex-start{display: flex;justify-content: flex-start;}
	.flex-end{display: flex;justify-content: flex-end;}
	.flex-end-plus{display: flex;justify-content: flex-end;align-items:center;}
	.flex-column{flex-direction: column}
	.flex-column-plus{display: flex;flex-direction: column}
	.flex-row{flex-direction: row}
	.flex-row-plus{display: flex;flex-direction: row}
	.flex-sp-around{justify-content:space-around;}
	.flex-sp-between{justify-content:space-between;}
	.text-align{text-align: center;}
	.flex-wrap-1{display: flex;flex-wrap: wrap}
	.flex-nowrap-1{display: flex;flex-wrap: nowrap}
	.align-end{display: flex;align-items:flex-end;}
	.align-end-plus{display: flex;align-items:flex-end;justify-content: center;}

	.backColorFFF{background-color: #FFFFFF;}
	//不换行超出省略
	.nowrap-hidden{white-space: nowrap;overflow: hidden; text-overflow: ellipsis;} 
	// 换行 限制2行 超出省略 
	.wrap-2-hidden {word-break: break-all; text-overflow: -o-ellipsis-lastline;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2; line-clamp: 2;  -webkit-box-orient: vertical;} 
	//换行超出滚动 
	.warp-scroll{word-break: break-all;  overflow: scroll; }	
    // 自动断词
	.word-break{word-break: break-all; }

2.列表页面进行列表分页连接

	// 物业企业列表
			onloadList(val) {
				NET.request(API.list, {
					size : this.pageSize,
					current : this.currentPage,
				}, 'get').then(res => {
					if(!val){
						this.list=[]
					}
					const data = res.data;
					this.total = data.total;
					this.total===0? this.dataNo=true : this.dataNo=false
					let listBox = [];
					listBox = data.records;
					this.list=this.list.concat(listBox);
					listBox = [];
					this.triggered = false;
				})
			},

			//刷新
			onRefresh() {
				this.triggered = true;
				this.currentPage=1;
				this.onloadList();
			},
			//重新加载
			reload(){
				this.currentPage=1;
				this.onloadList();
			},
			//分页，加载更多
			onLoadMore(){
				if(this.currentPage >=  (this.total/10)){
				}else{
					this.currentPage ++;
						this.onloadList('down');
					}
			},

3.uniapp查看图片

clickImg(val) {
	wx.previewImage({
		urls: [val], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: '', // 当前显示图片的http链接，默认是第一个
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
		})
	},

4.uniapp下载文件，打包成小程序不支持

 download(e) {
		let that = this
		uni.downloadFile({
			url:  e , //下载地址，后端接口获取的链接
			success: (data) => {
			if (data.statusCode === 200) {
				  uni.saveFile({ //文件保存到本地
				    tempFilePath: data.tempFilePath, //临时路径
				    success: function(res) {
				      uni.showToast({
				          icon: 'none',
				          mask: true,
				          title: '文件已保存!', 
				          duration: 3000,
				       });
				       uni.openDocument({
				            fileType: 'docx',
				            filePath: res.savedFilePath,
				            success: function(res) {
				            console.log('打开文档成功');
				            }
				        });
				      },
						fail :(error)=>{
							console.log(error)
						}
				      });
				     }
				    },
				  fail: (err) => {
				     console.log(err);
				     uni.showToast({
				          icon: 'none',
				          mask: true,
				          title: '失败请重新下载',
				        });
				      },
				     });
				   },	

5.富文本显示

<u-parse :html="detailInfo.textInfo" id="htmlImg"></u-parse>


html_decode(str){
					  var s = "";
					  if (str.length == 0) return "";
					  s = str.replace(/&amp;/g, "&");
					  s = s.replace(/&lt;/g, "<");
					  s = s.replace(/&gt;/g, ">");
					  s = s.replace(/&nbsp;/g, " ");
					  s = s.replace(/&#39;/g, "\'");
					  s = s.replace(/&quot;/g, "\"");
					  s = s.replace(/<br\/>/g, "\n");
					  return s;
				},

6.u-view的组件 u-upload使用

<u-upload     @on-success="imgFinish"  @on-remove="removeImg1" :file-list="logList1" ref="uUpload" :action="action"   :max-count="15"></u-upload>


<script>

	export default {
		data() {
			return {
				action: API.WX_API_BASE+'blade-resource/oss/endpoint/put-file',
				imgList:[],
				logList1:[],
				imgStr:'',
			
			}
		},

		methods: {
			imgFinish(val){
				this.imgList.push(val.data.link)
				this.imgStr = this.imgList.toString()
			},
			
			removeImg1(val){
				this.imgList.splice(val, 1); 
				this.imgStr = this.imgList.toString()
			},

			submit(){
				NET.request(API.submit,{
						file:this.imgStr,
				},
				'get').then(res => {
						this.imgStr='';
					this.$refs.uToast.show({
							title: "上传成功",
							position:'bottom',
					})
						this.logList1=[]
				    	this.imgList=[]
						this.$refs.uUpload.clear()
				})
			},
		}
	}
</script>