【萌宠案例】

最新推荐文章于 2024-08-29 20:45:01 发布
最新推荐文章于 2024-08-29 20:45:01 发布
阅读量338 收藏 8
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80735340/article/details/140702340
版权

文章目录

页面布局

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="item in 5">
				<view class="pic">
					<image src="../../static/logo.png" mode="widthFix"></image>
				</view>
				<view class="text">@@@@</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
				}
			}
		}
	}       
</style>

效果：
在这里插入图片描述

调用萌宠API接口渲染到页面中

随机猫咪API接口

代码如下：

<template>
   <view class="container">
   	<view class="layout">
   		<view class="box" v-for="item in pets" :key="item.id" >
   			<view class="pic">
   				<image :src="item.url" mode="widthFix"></image>
   			</view>
   			<view class="text">{{item.width}}*{{item.height}}</view>
   		</view>
   	</view>
   </view>
</template>

<script setup>
import { ref } from 'vue';
   const pets = ref([]);
   function network(){
   	uni.request({
   		url:"https://api.thecatapi.com/v1/images/search",
   		data:{
   			limit:10
   		}
   	}).then(res=>{
   		console.log(res.data); //只取数组
   		pets.value = res.data
   	})
   }
   
   network();
</script>

<style lang="scss" scoped>
   .container{
   	.layout{
   		padding: 50rpx;
   		.box{
   			margin-bottom: 60rpx;
   			box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
   			border-radius: 15rpx;
   			overflow: hidden;
   			.pic{
   				iamge{
   					width: 100%;
   				}
   			}
   			.text{
   				padding: 30rpx;
   			}
   		}
   	}
   }       
</style>

效果如下，每次刷新都会有不同的猫咪图片出现：
在这里插入图片描述
换个接口试一下：

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="item in pets" :key="item._id" >
				<view class="pic">
					<image :src="item.url" mode="widthFix"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	function network(){
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:10
			}
		}).then(res=>{
			console.log(res.data.data); 
			pets.value = res.data.data
		})
	}
	
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
	}       
</style>

效果：
在这里插入图片描述

previewImage图片预览和lazy-load懒加载

增加图片预览和懒加载功能，代码如下：

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//发送网络请求
	function network(){
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:10
			}
		}).then(res=>{
			console.log(res.data.data); 
			pets.value = res.data.data
		})
	}
	
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
	}       
</style>

效果：
在这里插入图片描述

对回调结果严格处理then_catch_finally用法

对网络的回调结果做出判断，代码如下：

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:10
			},
			header:{
				"access-key":"lp9899"
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = res.data.data
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
		})
	}
	
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
	}       
</style>

.then即使用result做一些事情，.catch是用于处理错误的；.finally即无论是否成功，都会执行。

完成下拉刷新和触底加载更多

下拉刷新的实现，即清空数组，然后重新加载。
触底加载更多的实现，即将新加载内容与旧内容合并起来。

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5
			},
			header:{
				"access-key":"lp9899"
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	//触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];
		network();
	})
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
	}       
</style>

效果：
在这里插入图片描述

pageScrollTo滚动到顶部和刷新

定义“刷新” “顶部” 两个按钮，为其设置CSS；然后定义点击刷新与界面滚动的方法。

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">刷新</view>
			<view class="item" @click="onTop">顶部</view>
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	//点击预览
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//点击刷新
	const onRefresh = function(){
		uni.startPullDownRefresh();
	}
	//返回顶部
	const onTop = function(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100,
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5
			},
			header:{
				"access-key":"lp9899"
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	//触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];
		network();
	})
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height:90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
	}       
</style>

效果：
加粗样式

使用uni-ui扩展组件

去到官方文档中，选择uni-icons图标，使用前需要点击安装：
在这里插入图片描述
然后选择，下载插件并导入：
在这里插入图片描述
导入成功后，会出现uni-modules文件夹：
在这里插入图片描述
用法：

<uni-icons type="contact" size="30"></uni-icons>

导入uni-load-more 加载更多插件，用法：

<uni-load-more status="more"></uni-load-more>

同时实现图标插件与加载更多插件，代码如下：

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refresh" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	//点击预览
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//点击刷新
	const onRefresh = function(){
		uni.startPullDownRefresh();
	}
	//返回顶部
	const onTop = function(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100,
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5,
				type:"cat"
			},
			header:{
				"access-key":"lp9899",
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	//触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];
		network();
	})
	network();
</script>

<style lang="scss" scoped>
	.container{
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height:90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}       
</style>

效果：
在这里插入图片描述

分段器组件实现点击切换萌宠类型

先实现分段器，代码如下：

<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="1" :values="[11,22,33]" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refresh" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
	const pets = ref([]);
	//点击菜单
	const onClickItem = function(e){
		console.log(e)
	}
	//点击预览
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//点击刷新
	const onRefresh = function(){
		uni.startPullDownRefresh();
	}
	//返回顶部
	const onTop = function(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100,
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5,
				type:"cat"
			},
			header:{
				"access-key":"lp9899",
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	//触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];
		network();
	})
	network();
</script>

<style lang="scss" scoped>
	.container{
		.menu{
			padding: 50rpx 50rpx 0;
		}
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height:90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}       
</style>

效果：
在这里插入图片描述
现在实现点击逻辑，分为三类：全部、猫猫、狗狗，点击后会显示相应的图片类型，在任意界面下拉刷新时回到全部界面

<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button" activeColor="#2B9939"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id" >
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click = "onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author">——{{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="refresh" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
	const pets = ref([]);
	const current = ref(0);
	const classify = [{key:"all",value:"全部"},{key:"dog",value:"狗狗"},{key:"cat",value:"猫猫"}];
	const values = computed(()=>classify.map(item=>item.value))
	//点击菜单
	const onClickItem = function(e){
		current.value = e.currentIndex
		pets.value = []
		console.log()
		network()
	}
	//点击预览
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		
		uni.previewImage({
			current:index,
			urls
		})
	}
	//点击刷新
	const onRefresh = function(){
		uni.startPullDownRefresh();
	}
	//返回顶部
	const onTop = function(){
		uni.pageScrollTo({
			scrollTop:0,
			duration:100,
		})
	}
	//发送网络请求
	function network(){
		uni.showNavigationBarLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5,
				type:classify[current.value].key
			},
			header:{
				"access-key":"lp9899",
			}
		}).then(res=>{
		if(res.data.errCode === 0){    //errCode = 0 ，才让它赋值
			pets.value = [...pets.value,...res.data.data]
			console.log(pets.value)
		}else if (res.data.errCode === 400){
			uni.showToast({
				title:res.data.errMsg,
				icon:"none",
				duration:3000,
			})
		}
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none",
				duration:3000,
			})
		}).finally(()=>{
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}
	
	//触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	//下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];
		current.value = 0
		network();
	})
	network();
</script>

<style lang="scss" scoped>
	.container{
		.menu{
			padding: 50rpx 50rpx 0;
		}
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.08);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					iamge{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color:#333;
					font-size:36rpx;
				}
				.author{
					padding:0 30rpx 30rpx;
					text-align:right;
					color:#888;
					font-size:28rpx;
				}
			}
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height:90rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}       
</style>

效果：
在这里插入图片描述

2301_80735340
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Scratch案例实操】Scratch萌宠运动会 scratch编程案例教学 scratch创意编程 少儿编程教案
青少年编程学习指导
07-29 4622
案例名称：Scratch萌宠运动会 学习目标： 了解如何绘制背景 熟练掌握Scratch坐标系，理解X坐标、Y坐标 掌握如何在Scratch中创建一个或多个变量，以及如何使用变量 PS：具体的单个指令模块详解可以查看《Scratch3.0入门教学》专栏 场景介绍： 想必每个小朋友都一定对西游记中师徒四人耳熟能详了吧，那么小朋友们你们更喜欢他们中的哪一个呢？ 是诚实善良、一项向佛的得道高僧唐僧 还是法力无边、降妖除魔的齐天大圣孙悟空 还是好吃懒做、憨厚单纯的前天蓬元帅猪八戒 亦或是沉默寡
萌宠主题页面设计灵感
awayaya1的博客
02-12 859
在设计的过程中大家先不要急于堆积素材，先理清文案，根据文案信息分析项目调性，确定视觉形式，多看看优秀的案例，这样才能做出好的版面。 集设网www.ijishe.com 设计师交流社区带来萌宠来袭！12个宠物类网页设计灵感 - 集设 设计没思路，那么就需要从这几个方面着手： 1、了解产品的背景，产品未来发展方向。 2、去搜UI网，模库网，集设网、优图网及各大优秀设计网站查找相关设计素材（扩展自己的思路） 3、选择适合产品设计风格的样式。 ...
萌宠俱乐部
m0_64005495的博客
11-14 2841
【代码】萌宠俱乐部。
Cocos Creator 小游戏案例
越陌度阡
07-25 524
最近在计划学习小游戏开发，查阅了一些资料，也找到了许多有趣的案例，特此记录与大家分享。
Qt 项目 简易版桌面萌宠
01-28
【Qt项目简易版桌面萌宠】是一个利用Qt6框架和Visual Studio 2019集成开发环境构建的应用程序，旨在为用户提供一个具有娱乐性的桌面宠物。...对于想要学习Qt6和GUI编程的开发者来说，这是一个很好的实践案例。
萌宠月度年度计划总结汇报PPT模板
07-16
根据给定的信息，“萌宠月度年度计划总结汇报PPT模板”主要面向希望学习不同技术领域的小白或进阶学习者。这份模板可以用于多种场合，包括但不限于毕业设计项目、课程设计、大作业、工程实训或是初期项目立项等。...
萌宠“富”养下的情感消费新声精品报告2020.pdf
04-24
《萌宠“富”养下的情感消费新声精品报告2020》是由阿里妈妈营销研究中心出品的一份行业咨询报告，这份报告依托阿里巴巴生态的大数据，通过阿里妈妈独特的研究模型和专业经验，对宠物行业的市场趋势进行了深入的洞察...
JavaScript代码片段
weixin_66128399的博客
08-26 372
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 734
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 4613
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1293
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 1584
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue2 part3
E___V___E的博客
08-25 885
年龄+1岁添加性别属性，默认值：男修改性别在列表首位添加一个朋友
vue part 5
最新发布
E___V___E的博客
08-29 444
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
浏览器精度问题
m0_46281382的博客
08-25 755
浏览器如何解析后端返回的long类型的数据
vue最早可以读取this的生命周期函数
youhebuke225的博客
08-25 376
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。
vue-cli搭建项目过程
2302_78078800的博客
08-25 1040
前端js框架 vue-cli的使用
JavaScript面向对象编程（OOP）基础
fanchen4139的博客
08-25 837
JavaScript面向对象编程（OOP）基础：从构造函数到ES6类的深入探讨
Python购买可爱萌宠
04-14
Python是一种高级编程语言，它被泛应用于软件开发、数据分析、人工智能等领域。它的语法简洁易懂，非常适合初学者入门。 关于购买可爱萌宠，Python并不直接涉及到这个问题。但是你可以使用Python来开发一个宠物商店的管理系统，用于管理宠物的信息、销售记录等。你可以使用Python的各种库和框架来实现这个系统，比如Django、Flask等。 如果你想购买可爱萌宠，建议你去当地的宠物店或者宠物市场寻找。在购买之前，你需要考虑一些因素，比如你的居住条件是否适合养宠物、你是否有足够的时间和精力照顾宠物、你是否了解该宠物的饲养需求等。记得在购买之前咨询专业人士或者宠物店的工作人员，他们会给你提供更详细的信息和建议。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值