今天是要把分类和个人页面完成,这里涉及的技术都有:自定义组件的使用、tabBar的设置、条件编译
tabBar的设置
这个导航其实在前面已经说过了,这里只做一个简单的描述,
在page.json中,设置tabBar,tabBar下是需要设置list的,因为导航是最少两个,最多五个的,这是要放在数组中,使用对象的方式,设置按钮名称、默认图片、选择后的图片、路径地址
例如:
html
"tabBar": {
"color": "#9799a5",
"selectedColor": "#28B389",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "static/tabBar/home.png",
"selectedIconPath": "static/tabBar/home-h.png",
"text": "推荐"
},
自定义组件
我们要达到的效果,是和上一章节相同,有一个模块是一样的,这里只要直接引用就可以了,
html
<template>
<view class="classLayout">
<view class="classify">
<theme-item v-for="item in 10"></theme-item>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.classify{
padding: 30rpx;
display:grid;
grid-template-columns: repeat(3,1fr);
gap: 15rpx;
}
</style>
个人页面
这个页面有前面写的,图片呈圆形,列表,列表下的边框,模糊阴影,扩展组件的使用
html
<template>
<view class="userLayout">
<view class="userInfo">
<view class="avatar">
<image src="../../static/xxmLogo.png" mode="aspectFill"></image>
</view>
<view class="ip">
192.168.1.1
</view>
<view class="address">
来自于:陕西
</view>
</view>
<view class="setion">
<view class="list">
<view class="row" >
<view class="letf">
<uni-icons type="cloud-upload-filled" size="20" color="#28B389"></uni-icons>
<text class="text">我的下载</text>
</view>
<view class="rigth">
<text class="text">0</text>
<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
</view>
</view>
<view class="row" >
<view class="letf">
<uni-icons type="star-filled" size="20" color="#28B389"></uni-icons>
<text class="text">我的评分</text>
</view>
<view class="rigth">
<text class="text">0</text>
<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
</view>
</view>
<view class="row" >
<view class="letf">
<uni-icons type="chatboxes-filled" size="20" color="#28B389"></uni-icons>
<text class="text">联系客服</text>
</view>
<view class="rigth">
<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
</view>
<!-- #ifdef MP -->
<button open-type="contact">联系客服</button>
<!-- #endif -->
<!-- #ifndef MP -->
<button @click="onClick">拨打电话</button>
<!-- #endif -->
</view>
</view>
</view>
<view class="setion">
<view class="list">
<view class="row" >
<view class="letf">
<uni-icons type="notification-filled" size="20" color="#28B389"></uni-icons>
<text class="text">订阅更新</text>
</view>
<view class="rigth">
<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
</view>
</view>
<view class="row" >
<view class="letf">
<uni-icons type="flag-filled" size="20" color="#28B389"></uni-icons>
<text class="text">常见问题</text>
</view>
<view class="rigth">
<uni-icons type="right" size="15" color="#9E9E9E"></uni-icons>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
function onClick(){
uni.makePhoneCall({
phoneNumber: '114' //仅为示例
});
console.log("ddh");
}
</script>
<style lang="scss" scoped>
.userLayout{
.userInfo{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 50rpx 0;
.avatar{
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
}
.ip{
font-size: 44rpx;
color: #333;
padding: 20rpx 0 5rpx;
}
.address{
font-size: 28rpx;
color: #aaa;
}
}
.setion{
width: 690rpx;
margin: 50rpx 0;
border: 1rpx solid #eee;
border-radius: 10rpx;
box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
.list{
.row{
display: flex;
justify-content: space-between;//这是让两端对齐
align-items: center;
padding: 0 30rpx;
height: 100rpx;
position: relative;
border-bottom: 1rpx solid #eee;
&:last-child{
border-bottom: 0;
}
.letf{
display: flex;
align-items: center;
.text{
padding-left: 20rpx;
color: #666;
}
}
.rigth{
display: flex;
align-items: center;
.text{
font-size: 28rpx;
color: #aaa;
}
}
button{
position: absolute;
height: 100rpx;
left: 0;
top: 0;
width: 100%;
opacity: 0;//指定了一个元素的不透明度
}
}
}
}
}
</style>
这就是个人页面,这里添加一个效果图,大家就明白了
这里有个点需要特别说明下。在这个里面,有个功能是联系客服,这是在组件中,有个button的组件,组件中有个属性,是open-type="contact",这是系统给的直接联系客服的,这个客服是在微信公众平台上添加的人员,
但是在开发的时候,使用的是H5,这个功能是没有办法使用的,只能是在H5的时候,让拨打电话,在api中设备下有拨打电话的属性,
uni.makePhoneCall(OBJECT);根据文档是可以设置电话等属性。那如果让一个小程序可以适配两个平台呢,这里就使用了uni-app的条件编译,使用方法:
这里的意思是:#ifdef MP:只在所有小程序中使用
#ifndef MP:除了小程序,其他都使用这个
以上就是今天的内容,共勉!