小程序首页的轮播图、导航、间隔、入口
index.wxml
<!-- 首页轮播图分区 -->
<view class='slider'>
<swiper indicator-dots="{{ true }}" autoplay="{{ true }}" interval="2500" duration="400" circular="{{ true }}">
<swiper-item>
<image src="https://image.suning.cn/uimg/aps/material/153820445234116791.jpg?from=mobile" width="375" height="150" mode="aspectFill" />
</swiper-item>
<swiper-item>
<image src="https://image3.suning.cn/uimg/cms/img/153853498201585303.jpg_1242w_610h_80q" width="375" height="150" mode="aspectFill" />
</swiper-item>
<swiper-item>
<image src="https://image.suning.cn/uimg/aps/material/153838522153970426.jpg?from=mobile" width="375" height="150" mode="aspectFill" />
</swiper-item>
</swiper>
</view>
<!-- 首页导航分区 -->
<view class='index-nav'>
<navigator class='nav-item'>
<image src='https://image3.suning.cn/uimg/cms/img/153804504628577288.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image1.suning.cn/uimg/cms/img/153804507827351388.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image3.suning.cn/uimg/cms/img/153838666910977641.gif'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image5.suning.cn/uimg/cms/img/153804514816040882.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image3.suning.cn/uimg/cms/img/153804520798724660.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image1.suning.cn/uimg/cms/img/153804524042080436.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image1.suning.cn/uimg/cms/img/153804526974755934.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image2.suning.cn/uimg/cms/img/153804529990764934.png?from=mobile'></image>
<text>美食</text>
</navigator>
<navigator class='nav-item'>
<image src='https://image5.suning.cn/uimg/cms/img/153804533219056487.png?from=mobile'></image>
<text>美食</text>
</navigator>
</view>
<!-- 间隔 -->
<view class='divider'></view>
<!-- 首页入口分区 -->
<view class='index-enter'>
<navigator class='enter-item'>
<image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000102654187_200x200.jpg?ver=2024&from=mobile' mode='aspectFit'></image>
</navigator>
<navigator class='enter-item'>
<image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000121615083_200x200.jpg?ver=2106&from=mobile' mode='aspectFit'></image>
</navigator>
</view>
index.wxss
/* 小程序的图片记得设置宽高 */
.slider,
.slider image,
.slider swiper{
width: 100%;
height:390rpx;
}
.index-nav{
/* 给当前父元素设置成伸缩盒模式 */
display: flex;
/* 设置子元素换行能排列 */
flex-wrap: wrap;
/* background-color: #fff */
}
.index-nav .nav-item{
width: 33.333%;
height: 200rpx;
/* 给当前父元素设置成伸缩盒模式 */
display: flex;
/* 设置垂直排列 */
flex-direction: column;
/* 设置主轴居中 */
justify-content: center;
/* 设置交叉轴居中 */
align-items: center;
box-sizing: border-box;
/* 微信小程序的字号大小官方推荐使用px */
font-size: 14px;
/* 右、底部边框 */
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
}
.index-nav .nav-item:nth-child(3n){
/* 每隔第三个元素去除边框 */
border-right: 0 none;
}
.index-nav image{
width: 130rpx;
height: 130rpx;
}
/* 首页入口分区 */
.index-enter{
display: flex;
padding: 20rpx 25rpx;
/* background-color: #fff; */
/* margin-top: 20rpx; */
}
.index-enter .enter-item{
width: 50%;
display: flex;
justify-content: center;
}
.index-enter image{
width: 320rpx;
height: 178rpx;
}
/* 分区间隔第一种方法 */
/* page{
background-color: rgba(170, 170, 170, 0.295);
} */
/* 分区间隔第二种方法 功能封装,专门用于做间隔的类*/
.divider{
height: 20rpx;
background-color: #f1f1f1;
}
index.js
Page({
})