uni-app常用场景速查记录

     记录一下uniapp开发过程中遇到的问题场景,方便后期查看.
     1.elementUI中textarea文本如何设置换行显示
     2.uniapp中实现文字滚动显示
     3.下拉刷新和触底分页查询
     4.图片高斯模糊处理
     5.vue.prototype定义全局方法在配置文件不生效问题记录
     6.H5隐藏导航栏返回按钮
     7.微信小程序分享页参数拼接与获取
     8.实现圆形头像显示
     9.view设置width:100不生效处理方案

1.elementUI中textarea本设置换行显示

    el-input标签中type为textarea中录入的文本内容,在表格中显示没有换行的样式,现要求进行换行显示.
    处理方式:显示的时候按照html的格式进行显示,这样只需要将显示的内容中添加换行样式即可,这里使用的br换行标签.

 <el-table-column
		        prop="content"
		        label="前端迭代内容"
		        width="500">
				<template slot-scope="scope">
				          <span  v-html="scope.row.content"></span>
				</template>
		      </el-table-column>

预览效果:

2.uniapp中实现文字滚动显示

    实现逻辑是利用swiper组件,定时展示多个swiper-item即可.实现代码如下:

<template>
	<view>
		<view class="scroll_box">
		           <swiper class="swiper" circular="true"  
							 :autoplay="autoplay" 
							:interval="interval" :duration="duration">
		               <swiper-item v-for="(item,index) in list" :key="index">
		                   <view class="swiper-item uni-bg-green">{
    
    {
    
    item}}</view>
		               </swiper-item>
		           </swiper>
		       </view>
	</view>
</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				// 轮播
				autoplay:true,
				interval:6000,
				duration:12000,
				list:[
					'项目上线初期,使用有问题可以联系客服',
					'项目上线初期,使用有问题可以联系客服',
					'项目上线初期,使用有问题可以联系客服',
				]
			};
		}
	}
</script>

<style lang="scss">
.scroll_box {
    
    
			position: fixed;
			top:10rpx;
			width: 100%;
			height: 10%;
			background: #FFFFFF;
			border-radius: 10rpx;
			.swiper{
    
    
				width: 100%;
				height: 100%;
			}
		}
</style>

展示效果如下:

3.下拉刷新和触底分页查询

    分页数据展示是很常见的场景,简单记录一下下拉刷新查询最新数据以及上滑到底部分页加载更多数据.两种方式分别使用到的页面生命周期:onPullDownRefresh和onReachBottom,具体代码可以参考如下:

data() {
    
    
		return {
    
    
			dynamicList:[],  // 动态记录
			currentPageDynamicList:[],  // 当前查询页的动态记录
			currentPage: 1,  // 当前页
			pageSize:2  // 每页显示条数
		};
	},
async onPullDownRefresh() {
    
     // 下拉刷新
		// 每次下拉需要重置当前页以及显示的动态
		this.dynamicList=[],
		this.currentPageDynamicList=[],
		this.currentPage=1
		  await this.serverFindDynamicInfoList(this.currentPage,this.pageSize)	
		 uni.stopPullDownRefresh();
	},
	onReachBottom(){
    
     // 触底加载下一页
		this.currentPage++
		this.serverFindDynamicInfoList(this.currentPage,this.pageSize)	
		
	},
	methods:{
    
    
	async serverFindDynamicInfoList(currentPage,pageSize){
    
    
			await findDynamicInfoList({
    
    
				'custom': {
    
    
					'auth': true
				},
				data:{
    
    
					"currentPage":currentPage,
					"pageSize":pageSize
				}
			}).then(response => {
    
    
				
				this.currentPageDynamicList=response.data.list.map(item=>
				 	({
    
    
							 // 数据处理
					})
				 )
				if(this.dynamicList.length == 0){
    
    
					this.dynamicList=this.currentPageDynamicList
				}else{
    
    
					this.dynamicList=[...this.dynamicList,...this.currentPageDynamicList];
				}
			}).catch((data) => {
    
    
				this.$api.showMsg(data.data.msg)
			})
		},
		}

注意:

this.dynamicList=[...this.dynamicList,...this.currentPageDynamicList];

为ESC6语法,意思是数组拼接,当时操作的时候使用this.dynamicList.concat(this.currentPageDynamicList)发现数组信息不变化即concat失效,故采用的前面参数拼接的方式.

4.图片高斯模糊处理

    使用css中filter: blur(radius)进行实现,"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
示例:

.img_content{
    
    
		filter: blur(4px);
	}

处理前:

处理后:

5.vue.prototype定义全局方法在配置文件不生效问题记录

    最近封装常用的GET、POST、DELETE、PUT请求,想在封装的文件中使用全局定义的方法,发现不生效.相关文件如下:
封装的公共方法commonMethod.js:

扫描二维码关注公众号，回复： 15453118 查看本文章

/**
 * 显示加载中
 * @author txm
 * 
 */
const showLoading=()=>{
    
    
	uni.showLoading({
    
    
			title: '加载中',
			mask: true
		})
}
/**
 * 取消加载中
 * @author txm
 * 
 */
const hideLoading=()=>{
    
    
	uni.hideLoading();
}




//注册定义的方法
export const commonMethod={
    
    
	showLoading,
	hideLoading
}

    封装请求方法packageMethod.js:

import httpApi from '@/common/httpApi.js'
import config from '@/common/config.js'
// 服务器路径
const serverUrl = config.serverUrl; 
// 用户token
const token = uni.getStorageSync('token');

// post请求封装
function postRequest(url, data, header) {
    
    
	var promise = new Promise((resolve, reject) => {
    
    
		console.log('commonMethod:',commonMethod)  // 打印内容为undefined
		// 显示加载中
		this.$commonMethod.showLoading()
		var that = this;
		var postData = data;
		console.log('postData',JSON.stringify(postData))
		uni.request({
    
    
			url: serverUrl + url,
			data: postData,
			method: 'POST',
			timeout: 100000,
			header: {
    
    
				'content-type': header || 'application/json',
				'token': token,
			},
			success: function(res){
    
     
				console.log('success:res',JSON.stringify(res))
				this.$commonMethod.showLoading()
				if (res.data.code == 200) {
    
    
					 resolve(res.data.data);
				}
			},
			fail: function(e) {
    
    
				this.$commonMethod.showLoading().hideLoading(); 
				this.$commonMethod.showLoading().showMsg('网络错误')
				console.log('e',JSON.stringify(e))
				reject('网络错误');
			}
		})
	});
	return promise;
}

module.exports = {
    
    
	postRequest
}

    commonMethod实际打印内容为undefined,之前在页面中都是直接使用this.$commonMethod.方法就可以显示

    仔细考虑了一下Vue.prototype定义全局变量的方式只是对vue实例生效,比如说各种vue文件,但是封装的js文件不属于vue实例,所以不会生效.下面讲一下如何处理这个问题.最简单的办法就是在请求封装js中引入公共方法js.具体引入方式如下:

import {
    
    commonMethod} from '@/common/commonMethod.js'

调用方式:

commonMethod.showLoading()

    另外说下export const commonMethod={}与 export default{}的引用方式:
    前者引用方式:

import {
    
    commonMethod} from '@/common/commonMethod.js'

    commonMethod名称固定,且需要带{}
    后者引用方式:

import commonMethod from '@/common/commonMethod.js'

    commonMethod可随意定义
    再说下resolve与reject,前者表示接口回调成功,后者表示回调失败.在实际方法调用中resolve对应then,reject对应catch.请求方法示例:

methods: {
    
    
			serverBindUserGzhOpenId(){
    
    
				bindUserGzhOpenId({
    
    
					'gzhCode': "123"
				}).then(response => {
    
    
				// 封装请求方法中的resolve会进入到then中
					console.log("serverBindUserGzhOpenId开始response")
				}).catch((data) => {
    
    
				// 封装请求方法中的reject会进入到then中
					this.$commonMethod.showMsg(JSON.stringify(data.msg))
				})
			}
	}

6.H5隐藏导航栏返回按钮

    对应页面中添加如下内容:

mounted(){
    
    
			// 隐藏导航栏的返回箭头,页面会显示导航栏背景色
			document.querySelector('.uni-page-head-hd').style.display = 'none'
			// 隐藏导航栏
			document.querySelector('.uni-page-head').style.display = 'none'
		}

7.微信小程序分享页参数拼接与获取

    要求实现用户A分享内容到好友以及朋友圈,其他用户进入到小程序后绑定与用户A直接的关系记录.
分享好友以及分享到朋友圈设置:

// 发送好友
		onShareAppMessage(res) {
    
    
		    return {
    
    
		        title: '我是分享给好友', //分享的名称
		        path: '/pages/index/index?userId=256',
		        mpId:'12456' //此处配置微信小程序的AppId
		    }
		},
		//分享到朋友圈
		onShareTimeline(res) {
    
    
		    return {
    
    
		        title: '我是分享给朋友圈',
				query: 'userId=456'
		    }
		},

    分享页初始化解析是否存在分享用户ID:

created(){
    
    
	// 获取页面信息
			let currentPage=getCurrentPages();
			console.log("getCurrentPages()",currentPage)
			let page=currentPage[0].options
			console.log("userId:",page.userId)

}

8.实现圆形头像显示

    讲一种实现圆形头像的方式:
上传的原图:

<image src="https://oss.haokeruanjian.top/drift/user_img/tmp_001ee2b5a10ad53a51516d2b08f846b6.jpg" ></image>

    处理圆形显示:

<image src="https://oss.haokeruanjian.top/drift/user_img/tmp_001ee2b5a10ad53a51516d2b08f846b6.jpg" style="height: 80px;width: 80px;border-radius:100px"></image>

    添加样式:保持图片宽高相等,使用border-radius将圆角去掉.效果如下:

9.view设置width:100不生效处理方案

    设置view高度或是宽度100%时需要保证父元素是100%.如果不生效可以考虑修改单位为vw、vh
进行处理,

vw：1vw等于视口宽度的1%。 100vw等于窗口的宽度
vh：1vh等于视口高度的1%。 100vh等于窗口的高度