学习Uni-app开发小程序Day2

前言

昨天已经是了解到uni-app的开发工具和编写方式，今天学习的是更全面的，在页面添加轮播图片等

一、uni-app的视图容器

在uni-app中，虽然使用的也是vue3，但是在template中，不能再使用div标签，需要更改成view，功能类似div标签。
在首页需要显示标题或者导播图，就添加一个可以轮播图片的功能。
在view中和swiper结合使用
例如：
<template>
<swiper class="banner" indicator-dots indicator-clolor autoplay="true">
	<swiper-item v-for="item in pictures" :key="item.id">
		<image mode="widthFix" @tap="onPreviewImage(item.url)" :src="item.url"></image>
	</swiper-item>
</swiper>
<view class="content">
	<text class="title">{{title}}</text>
</view>

二、使用步骤

在script标签中，定义pictures，通过数组的形式，将需要轮播的图片全部封装起来，在页面上方便调用。`export default {
	data() {
		return {
			title: 'Uni-app欢迎页面',
			pictures: [{
					id: '1',
					url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg"
				},
				{
					id: '2',
					url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg"
				},
				{
					id: '3',
					url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg"
				},
				{
					id: '4',
					url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg"
				},
				{
					id: '5',
					url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg"
				},
			]
		}`

methods: {
onPreviewImage(url) {
// console.log(url)
uni.previewImage({
urls: this.pictures.map(v => v.url),
current: url
})
}
在下面接收图片显示到控件上
在最下面需要添加style，
显示轮播图片的大小
.banner,
.banner image {
width: 100%; /* 宽度为视口宽度的100% /
height: 360rpx; / 高度自动按比例调整 */
}

总结

最后就能显示轮播图片了，但是在操作的过程中，发现还是对vue的使用不熟练，很多东西需要看完学习资料在找文档看。
在这个过程中，很多是粗心导致出现错误，显示不全等情况，这需要谨记，在用心耐心点。
还有个问题，轮播图片设置宽高这里，根据标签中mode=“widthFix”，设置图片显示的模式，并没有达到想要的效果，我想要的是原图，宽是手机宽度，高是图片高度或者设置的高度，但是图片需要铺满宽，压缩高，显示原图，结果是宽铺满，图片裁剪显示，看起来并不和谐，该问题未解决
加油，出现问题解决问题，不放弃！！！