微信小程序首页效果图
1.wxml
<!-- 底部标签栏 -->
<van-tabbar active="{{ active }}" active-color="#07c160" inactive-color="#000" bind:change="onChange">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="shop-o">商城</van-tabbar-item>
<van-tabbar-item icon="chat-o">消息</van-tabbar-item>
<van-tabbar-item icon="user-circle-o">个人中心</van-tabbar-item>
</van-tabbar>
<!-- 首页设计 -->
<view wx:if="{{active==0}}">
<!-- 搜索 -->
<view class="top">
<van-sticky>
<van-row style="height: 2rem;margin-top: 1.5rem;">
<van-col span="2">
<!-- <image style="height: 2rem;width: 2rem;margin-left: 0.5rem;" class="login-img" src="/pages/image/logo.png"></image> -->
</van-col>
<van-col span="24">
<van-search style="height: 2rem;" shape="round" background="#56c5a1" value="{{searchValue}}" placeholder="请输入搜索关键词" use-action-slot bind:change="onSearchChange" bind:search="onSearch">
<view style="color: white;" slot="action" bind:tap="onSearchClick">搜索</view>
</van-search>
</van-col>
<!-- <van-col span="2">span: 8</van-col> -->
</van-row>
</van-sticky>
</view>
<!--商品幻灯片-->
<view class="slideshow">
<view class="swiper">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" class="banner" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imageList}}" wx:key="goods_info">
<swiper-item>
<image class='slide-image' mode="aspectFill" src='{{item.optionInterduce}}' data-index="{{index}}" bindtap="previewImg" bindlongpress="deleteImg" name="headimage"></image>
</swiper-item>
</block>
</swiper>
</view>
<van-button class="consult-button" color="#2cb180" round icon="phone-o" size="small" type="primary">立即咨询</van-button>
</view>
<!-- 导航栏 -->
<view class="navigation">
<view class="navigation-bar">
<van-row>
<van-col span="5">
<image style="height: 6.8rem;" src="/pages/image/teacher_backdrop.png"></image>
</van-col>
<van-col span="19">
<van-grid column-num="2">
<van-grid-item use-slot wx:for="{{ 4 }}" wx:for="{{navigationList}}">
<view style="height: 1.5rem;">
<image class="navigation-img" src="{{item.icon}}"></image>
<text style="margin-left: 0.85rem;font-size: 1.15rem;">{{item.title}}</text>
</view>
</van-grid-item>
</van-grid>
</van-col>
</van-row>
</view>
</view>
<!-- 展示老师 -->
<view class="teacher">
<view class="teacher-title">
<van-row>
<van-col span="1">
<view class="prefix"></view>
</van-col>
<van-col span="22">
<text class="text">专业老师</text>
</van-col>
<van-col span="1">
<van-icon name="arrow" />
</van-col>
</van-row>
</view>
<view class="topBar">
<scroll-view class="classScroll" scroll-x="true">
<view class="tab-bar">
<view style="margin: 1rem 0.25rem;font-family: '楷体';" class="tab-item {{currentTab === index ? 'active' : 'index'}}" wx:for="{{categories}}" wx:key="{{index}}" data-index="{{index}}" bindtap="switchTab" data-id="{{item.optionId}}">
<text>{{item.text}}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 老师展示 -->
<view>
<view class="teacher-Info">
<van-row>
<van-col span="7">
<image style="height: 6rem;width: 5.5rem;border-radius: 10px;" src="https://img2.baidu.com/it/u=1043407016,3396810233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
</van-col>
<van-col span="17">
<view class="message">
<van-row>
<van-col>
<text class="name">朱剑</text>
</van-col>
<van-col style="margin-left: 0.5rem;">
<image style="height: 1rem;width: 1rem;padding-top: 0.05rem;margin-left: 0.5rem" src="/pages/image/vipicon.png"></image>
<text style="color: black;font-weight: bold;margin-left: -0.3rem;">1</text>
</van-col>
<van-col>
<view style="color: rgb(156, 143, 143);margin-left: 1rem;">清华大学</view>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col>
<text class="name">擅长</text>
</van-col>
<van-col>
<text style="color:#56c5a1;margin-left: 0.5rem;">美术</text>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col span="12">
<image class="imge" src="/pages/image/playvideo.png"></image>
<text class="details">课程:10节</text>
</van-col>
<van-col span="12">
<image class="imge" src="/pages/image/Learned.png"></image>
<text class="details">68人已学习</text>
</van-col>
</van-row>
</view>
</van-col>
</van-row>
</view>
<view class="teacher-Info">
<van-row>
<van-col span="7">
<image style="height: 6rem;width: 5.5rem;border-radius: 10px;" src="https://img2.baidu.com/it/u=1043407016,3396810233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
</van-col>
<van-col span="17">
<view class="message">
<van-row>
<van-col>
<text class="name">朱剑</text>
</van-col>
<van-col style="margin-left: 0.5rem;">
<image style="height: 1rem;width: 1rem;padding-top: 0.05rem;margin-left: 0.5rem" src="/pages/image/vipicon.png"></image>
<text style="color: black;font-weight: bold;margin-left: -0.3rem;">1</text>
</van-col>
<van-col>
<view style="color: rgb(156, 143, 143);margin-left: 1rem;">清华大学</view>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col>
<text class="name">擅长</text>
</van-col>
<van-col>
<text style="color:#56c5a1;margin-left: 0.5rem;">美术</text>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col span="12">
<image class="imge" src="/pages/image/playvideo.png"></image>
<text class="details">课程:10节</text>
</van-col>
<van-col span="12">
<image class="imge" src="/pages/image/Learned.png"></image>
<text class="details">68人已学习</text>
</van-col>
</van-row>
</view>
</van-col>
</van-row>
</view>
<view class="teacher-Info">
<van-row>
<van-col span="7">
<image style="height: 6rem;width: 5.5rem;border-radius: 10px;" src="https://img2.baidu.com/it/u=1043407016,3396810233&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
</van-col>
<van-col span="17">
<view class="message">
<van-row>
<van-col>
<text class="name">朱剑</text>
</van-col>
<van-col style="margin-left: 0.5rem;">
<image style="height: 1rem;width: 1rem;padding-top: 0.05rem;margin-left: 0.5rem" src="/pages/image/vipicon.png"></image>
<text style="color: black;font-weight: bold;margin-left: -0.3rem;">1</text>
</van-col>
<van-col>
<view style="color: rgb(156, 143, 143);margin-left: 1rem;">清华大学</view>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col>
<text class="name">擅长</text>
</van-col>
<van-col>
<text style="color:#56c5a1;margin-left: 0.5rem;">美术</text>
</van-col>
</van-row>
</view>
<view class="message">
<van-row>
<van-col span="12">
<image class="imge" src="/pages/image/playvideo.png"></image>
<text class="details">课程:10节</text>
</van-col>
<van-col span="12">
<image class="imge" src="/pages/image/Learned.png"></image>
<text class="details">68人已学习</text>
</van-col>
</van-row>
</view>
</van-col>
</van-row>
</view>
<view style="height: 6rem;"></view>
</view>
</view>
</view>
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": "艺教服务平台"
}
轮播图和科目标签使用了数据库数据,图标建议引用icon以减少小程序占用空间及打开速度。