微信小程序–首页index
包含功能点:
- 轮播图
- 商品分类
- 商品楼层:双重for循环
结构:index.wxml
<view class="pyg_index">
<!-- 搜索框 -->
<searchInput></searchInput>
<!-- 轮播图 -->
<view class="index_swiper">
<swiper autoplay="{{true}}" indicator-dots="{{true}}" circular="{{true}}">
<swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
<navigator url="{{item.navigator_url}}" hover-class="navigator-hover" open-type="navigate" url="/pages/goods_detail/goods_detail?goods_id={{item.goods_id}}">
<image src="{{item.image_src}}" mode="widthFix" lazy-load="false" />
</navigator>
</swiper-item>
</swiper>
</view>
<!-- 导航 -->
<view class="index_cate">
<navigator wx:for="{{cateList}}" wx:key="name" url="/pages/category/category" open-type="switchTab">
<image src="{{item.image_src}}" mode="widthFix" lazy-load="true" />
</navigator>
</view>
<!-- 楼层 -->
<view class="index_floor">
<view class="floor_group" wx:for="{{floorList}}" wx:for-item="item1" wx:for-index="index1" wx:key="floor_title">
<!-- 标题 -->
<view class="floor_title">
<image src="{{item1.floor_title.image_src}}" mode="widthFix" lazy-load="false" />
</view>
<!-- 内容:如果是第一张图片:模式为widthFix -->
<view class="floor_list">
<navigator url="" hover-class="navigator-hover" open-type="navigate" wx:for="{{item1.product_list}}" wx:for-item="item2" wx:for-index="index2" wx:key="name" url="/pages/goods_lsit/goods_lsit?query={{item2.name}}">
<image src="{{item2.image_src}}" mode="{{index2==0?'widthFix':'scaleFill'}}" lazy-load />
</navigator>
</view>
</view>
</view>
</view>
样式:index.less
// 轮播图
.index_swiper {
swiper {
width: 750rpx;
height: 340rpx;
image {
width: 100%;
}
}
}
// 导航
.index_cate {
display: flex;
navigator {
padding: 20rpx;
flex: 1;
image {
width: 100%;
}
}
}
// 楼层--特点:每张图片占比1/3 后面图片高度占第一张图片的1/2
.index_floor {
.floor_group {
.floor_title {
padding: 10rpx 0;
img {
width: 100%;
}
}
.floor_list {
// 清除浮动
overflow: hidden;
navigator {
float: left;
// 占比1/3
width: 33.33%;
/*
后四个超链接
原图的宽高:232 * 386px
232 / 386 = 33.33vw / height
第一张图片的高度height: 33.33vw * 386 / 232
*/
&:nth-last-child(-n+4) {
height: 33.33vw * 386 / 232 / 2;
// 后四张图片:添加左边框
border-left: 10rpx solid #fff;
}
// 2和3两个超链接:添加下边框
&:nth-child(2),
&:nth-child(3) {
border-bottom: 10rpx solid #fff;
}
img {
width: 100%; // 继承父元素的宽度
height: 100%;
}
}
}
}
}
逻辑:index.js文件
import {request} from "../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
// 轮播图
swiperList: [],
// 分类
cateList: [],
// 楼层
floorList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSwiperList()
this.getCateList()
this.getFloorList()
},
// 获取轮播图数据
getSwiperList(){
request({url:"/home/swiperdata"})
.then(result=>{
this.setData({
swiperList: result
})
})
},
// 获取分类数据
getCateList(){
request({url:"/home/catitems"})
.then(result=>{
this.setData({
cateList: result
})
})
},
// 获取楼层数据
getFloorList(){
request({ url:"/home/floordata"})
.then(result=>{
this.setData({
floorList: result
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
页面配置文件:index.json文件
{
"usingComponents": {
"searchInput": "../../component/searchInput/searchInput"
}
}