微信小程序首页设计
微信小程序首页效果图
1.wxml
首页
商城
消息
个人中心
搜索
立即咨询
{{item.title}}
专业老师
{{item.text}}
2.js
// pages/user/homePage/homePage.js
Page({
/**
* 页面的初始数据
*/
data: {
categories: [
{
label: "推荐",
optionId: 0,
optionInterduce: null,
text: "推荐",
value: 0,
}
],
currentTab: 0,
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
circular: true,
active: 0,
searchValue: "", //搜索值
navigationList: [{
value: 1,
title: "申请助学",
icon: "/pages/image/Student.png"
},
{
value: 2,
title: "赛事资讯",
icon: "/pages/image/competition.png"
}, {
value: 3,
title: "视频课程",
icon: "/pages/image/videocourse.png"
}, {
value: 4,
title: "志愿填报",
icon: "/pages/image/volunteer.png"
},
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var that = this
const list = that.data.categories
},
//切换table
switchTab(e) {
const index = e.currentTarget.dataset.index; // 获取点击的tab索引
const optionType = e.currentTarget.dataset.id; // 获取点击的tab索引
this.setData({
currentTab: index // 更新currentTab的值
});
// var that = this;
// this.getTeacherInfo(that, optionType);
// this.getCarouselmap(that, optionType)
},
//首页标签切换
onChange(event) {
this.setData({
active: event.detail
});
if (event.detail == 3) {
//let countDown = this.selectComponent('#countDown'); // 页面获取自定义组件实例
//countDown.closeGold(); // 通过实例调用组件事件
}
},
onSearchChange(e) {
this.setData({
searchValue: e.detail,
});
},
onSearch() {
Toast('搜索' + this.data.searchValue);
},
onSearchClick() {
Toast('搜索' + this.data.searchValue);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
//获取轮播图
getCarouselmap() {
},
})3.wxss
/* 顶部搜索框 */
.top {
background-color: #56c5a1;
height: 8.5rem;
border-bottom-left-radius: 40px;
/* 左下角圆角 */
border-bottom-right-radius: 40px;
/* 右下角圆角 */
}
.van-search {
height: 2rem;
align-items: center;
box-sizing: border-box;
display: flex;
padding: var(--search-padding, 10px 12px);
}
/* 轮播图 */
.slideshow {
padding: 0rem 0.5rem;
border-radius: 100px;
margin-top: -5.5rem;
}
.swiper {
width: 100%;
height: 180px;
}
.banner {
height: 180px;
}
.slide-image {
width: 100%;
height: 100%;
border-radius: 10px;
}
.consult-button {
display: flex;
/* background-color: #4fc08d; */
justify-content: center;
align-items: center;
margin-top: -4.5rem;
}
/* 导航栏 */
.navigation {
padding: 0rem 0.5rem;
margin-top: 5rem;
}
.navigation-bar {
/* padding: 0.2rem 0.2rem; */
height: 6.8rem;
border: 1px solid rgb(216, 207, 207);
border-radius: 10px;
}
.navigation-img {
float: left;
height: 1.5rem;
width: 1.5rem;
}
/* 展示老师 */
.teacher {
padding: 0rem 0.5rem;
}
.teacher-title {
margin-top: 0.75rem;
}
.teacher-title .text {
font-weight: bold;
font-size: 0.85rem;
}
.teacher-title .prefix {
width: 0.3rem;
height: 1.2rem;
background-color: #56c5a1;
border-radius: 10px;
}
.topBar {
display: flex;
/* box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); */
/* position: fixed; */
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: white;
}
.classScroll {
width: 375px;
padding-left: 2px;
}
.tab-bar {
display: flex;
justify-content: flex-start;
/* 修改为左对齐 */
width: fit-content;
/* 修改为适应内容的宽度 */
}
.tab-item {
flex: 1 0 auto;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
line-height: 40px;
color: #888888;
}
.tab-item.active {
/* margin-left: 0.5rem; */
height: 1.5rem;
width: 2rem;
color: white;
border-radius: 5px;
background-color: #56c5a1;
font-weight: bolder;
}
.tab-item.index {
/* margin-left: 0.5rem; */
height: 1.5rem;
width: 2rem;
color: rgb(156, 148, 148);
border-radius: 5px;
background-color: #c0eedf;
font-weight: bolder;
}
/* 老师展示 */
.teacher-Info {
width: 100%;
height: 6rem;
margin-top: 0.65rem;
}
.message{
margin: 0.65rem 0.5rem;
}
.teacher-Info .name {
color: black;
font-weight: bold;
font-size: 0.85rem;
font-family: '楷体';
}
.teacher-Info .imge {
height: 1rem;
width: 1rem;
margin-top: 0.05rem;
}
.teacher-Info .details {
margin-left: 0.5rem;
color: rgb(97, 90, 90);
font-family: '楷体';
font-size: 0.95rem;
}4.json
{
"usingComponents": {
},
"navigationBarBackgroundColor": "#56c5a1",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "艺教服务平台"
}小程序引入了Vant Weapp组件库
轮播图和科目标签使用了数据库数据，图标建议引用icon以减少小程序占用空间及打开速度。