uniapp结合uView组件库做项目中遇到的系列问题（一）

一、使用u-image组件显示图片时 H5正常显示 小程序显示不了

//小程序不能显示 H5可以显示
<u-image width="100%" mode="widthFix" :border-radius="10" :fade="true" :src="img.imgSrc | imageUrl"></u-image>

//H5 小程序可以显示
<image :src="img.imgSrc | imageUrl" mode="widthFix" class="image"></image>

这里需说明一下 有时使用u-image组件时小程序也是可以显示的 这里说一下我遇到的不能显示的情况以及解决办法

1.设置图片高度和高度时，使用u-image自带属性width height，尽量不用class、style形式表示图片宽高

2.当使用u-image第一点尝试无效后，可以用uniapp中的组件image代替

3.在uVIew组件中使用过滤器，小程序有些时候会不支持 可以先把数据处理好再绑定数据变量

二、使用u-empty组件时 属性show设置为true时 组件在小程序不显示

使用 v-if指令 代替show 控制组件的显示隐藏

三、使用u-button组件注意事项

1.当在u-button组件外面包裹一个view并设置样式 如下

<view class="confirmBtn">
	<u-button shape="square" :custom-style="btnStyle" @click="confirm()">按钮</u-button></view>

这样表示 在小程序的效果会有差异
应该在外面再包裹一层view

<view class="Box">
	<view class="confirmBtn">
		<u-button shape="square" :custom-style="btnStyle" @click="confirm()">按钮</u-button>
	</view>
</view>

这样设置对应的样式小程序和H5显示的效果就会一样啦。

或者也可以不用view包裹 直接使用custom-style属性修改按钮样式

但是要注意 使用custom-style要使用对象形式 尽量不要在css中定义 因为在css上定义样式的话 小程序端可以会有些差异

使用对象形式要注意对象key值要使用驼峰命名规则，value是String类型 类似这样

btnStyle:{
	position:'absolute',
	top:'50%',
	right:'17%',
	transform: 'translateY(-50%)',
	width:'100rpx',
	height:'40rpx',
	fontSize:'24rpx',
	color:'#333'
}

以上这几种情况只是我自己在做项目中遇到的问题 如有不对之处 还请指出 勿喷！