1.图像格式选择

在微信小程序里

png格式图片内存太大了加载不出来

jpg格式图片缩小之后就特别糊

泳仪姐推荐使用svg 我就在UI那里导出了svg格式图片 可惜有些svg图片使用展示出来有问题 背后有污渍 就很难受

感受是svg格式图片是最看起来最舒服的 很清晰 ( 可以在微信小程序里直接使用了 不需要转为64位) 我现在觉得尽可能用svg吧 页面上还有些不清楚的图以后再解决

JPG\PNG\SVG该如何选择？可以看这个文章 讲的很清楚

常用图片格式JPG\PNG\SVG该如何选择？_qt界面选择png还是svg-CSDN博客

2.处理UI给的图背景留白问题

我自己想的几种处理办法

(1) 盒子加上圆角 overflow:hidden; 即可

(2) 使用svg图

(3) 正常使用 但是给图片加上mix-blend-mode:mutiply;

3.Uniapp自带搜索框组件无法做成想要的样式—> 修改组件源码

想要的样式搜索框是长这样的

但是Uniapp组件中搜索框都长这样

看了文档之后发现其他都能自己配置 但是不能设置内部的搜索按钮

于是勇闯uni_modules/uni-search-bar源码 看看能不能直接修改

看了下发现挺好理解的 删除了一些不需要的部分之后添加自定义按钮和样式

最后我的搜索框长这样 算还原的不错了吧

4.精选案例和最新资讯menu栏及其样式切换

一开始想用Uniapp组件库里的东西 感觉太丑了 也不太好用 然后就想着自己写

想到用事件委托来写的 给select元素添加id 给select_part父盒子添加点击事件 在JS中获得回调e.target.id就可以获取点击的那个盒子的id

声明current 响应式数据 根据获取的id值与current对应来展现不同页面情况

但是有个小问题就是这里涉及到了渐变字体 我要给字体外面重新套一个盒子来实现 所以可能点击的元素冒泡上去是套字体的盒子 导致无法获取id值 所以换了个想法

直接在select盒子上添加点击事件改变current的值 但这就需要在每个盒子上都加上点击事件了 暂时没想到更好的解决方案

最终代码是长这样

<view class="select_part">
	<view class="select" :class="{ active: current === 1 }" @click="current = 1">
		<view class="text">
			精选案例
		</view>
	</view>
	<view class="select" :class="{ active: current === 2 }" @click="current = 2">
		<view class="text">
			最新资讯
		</view>
	</view>
</view>
<view v-if="current == 1">
	<ExampleCard></ExampleCard>
	<ExampleCard></ExampleCard>
	<ExampleCard></ExampleCard>
	<ExampleCard></ExampleCard>
	<ExampleCard></ExampleCard>
	<ExampleCard></ExampleCard>
</view>
<view v-else>
	<ExampleCard></ExampleCard>
</view>

5.返回顶部按钮显示并设置淡入淡出效果

(1) 声明响应式变量flag 控制返回顶部栏显示

(2) onPageScroll( e => { } ) 监听页面滚动 获得滚动距离顶部距离 ( 需提前引入 )

(3) 声明函数 使用uni.pageScrollTo 进行跳转

JS代码如下

const flag = ref(false)
const goTop = () => {
	uni.pageScrollTo({
		scrollTop: 0, //滚动到距离顶部为0
		duration: 200 //滚动时长
	})
}
onPageScroll(e => {
	if (e.scrollTop > 300) {
		flag.value = true
	} else {
		flag.value = false
	}
})

(4) CSS中设置返回顶部按钮淡入淡出和滑入滑出效果

CSS代码如下

.goTop {
	width: 198rpx;
	height: 68rpx;
	background: linear-gradient(to right, #3150f5, #8a3bfc);
	position: fixed;
	right: 0;
	bottom: 500rpx;
	border-radius: 10rpx 0 0 10rpx;
	z-index: 100;
	display: flex;
	align-items: center;
	padding: 12rpx;
	opacity: 0; // 默认透明
	transition: all 0.5s ease; // 过渡效果
	pointer-events: none; // 隐藏时禁止点击
	transform: translateX(198rpx);

	&--show {
		opacity: 1; // 显示时不透明
		transform: translateX(0);
		pointer-events: auto; // 显示时允许点击
	}

	.icon_goTop {
		margin-top: 6rpx;
		width: 56rpx;
		height: 56rpx;
		background: url('/common/images/index/goTop.svg');
	}

	.goTop_text {
		font-size: 24rpx;
		color: #fff;
		white-space: nowrap;
	}
}

实现效果如下 全损画质