微信小程序首页设计

微信小程序首页效果图

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": "艺教服务平台"
}

小程序引入了Vant Weapp组件库

轮播图和科目标签使用了数据库数据，图标建议引用icon以减少小程序占用空间及打开速度。