今天又开始学习了。
现在进行导航图标的设置。
在// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperData: [], //存放轮播图数据
catitemsData:[] //存放导航图标数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数，this指向最大的函数Page
this.getSwiperData();
this.getCatitems();
},
//获取轮播图数据的函数
getSwiperData:function (){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
swiperData:res.data.message
})
console.log(this.data.swiperData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
//获取导航图标函数
getCatitems(){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
catitemsData:res.data.message
})
console.log(this.data.catitemsData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})这里插入代码片
然后我们就可以请求到导航图标的地址
然后开始对导航图标进行布局
然后对商品分类进行布局
获取数据
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperData: [], //存放轮播图数据
catitemsData:[], //存放导航图标数据
floorData:[] //存放商品分类数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数，this指向最大的函数Page
this.getSwiperData();
this.getCatitems();
this.getFloorData();
},
//获取轮播图数据的函数
getSwiperData:function (){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
swiperData:res.data.message
})
console.log(this.data.swiperData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
//获取导航图标函数
getCatitems(){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
catitemsData:res.data.message
})
console.log(this.data.catitemsData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
//获取商品分类数据函数
getFloorData(){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
floorData:res.data.message
})
console.log(this.data.floorData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最终代码：
<view class="index">
<!--搜索导航-->
<Search></Search>
<!-- 商品轮播图-->
<view class="index_swiper">
<swiper indicator-dots autoplay circular>
<swiper-item wx:for="{{swiperData}}"
wx:key="index">
<image src="{{item.image_src}}"></image>
</swiper-item>
</swiper>
</view>
<!--图标导航-->
<view class="navIcon">
<navigator wx:for="{{catitemsData}}" wx:key="index" url="/pages/sort/sotr" open-type="switchTab">
<image mode="widthFix" src="{{item.image_src}}"></image>
</navigator>
</view>
</view>
<!-- 商品分类-->
<view class="floor_goods">
<view class="goodsItem" wx:for="{{floorData}}" wx:key="index">
<!-- 标题-->
<view class="floorTitle">
<image mode ="widthFix" src="{{item.floor_title.image_src}}"></image>
</view>
<!-- 图片-->
<view class="floorList">
<navigator wx:for="{{item.product_list}}" wx:for-index="id"
wx:for-item="floor" wx:key="id" class="{{id == 0? 'bigImg' : 'smallImg'}}">
<image mode ="scaleToFill" src="{{floor.image_src}}"></image>
</navigator>
</view>
</view>
</view>
/* 轮播图样式*/
.index_swiper{
background-color: #e4393c;
}
.index_swiper swiper{
height: 340rpx;
}
.index_swiper swiper image{
width: 100%;
height: 100%;
display: block;
border-radius: 30rpx 30rpx 0 0;
}
/* 图标导航样式*/
.navIcon{
display: flex;/*弹性布局*/
}
.navIcon navigator{
width:25%;
padding:30rpx 20rpx;
}
.navIcon navigator image{
width: 100%;
}
/*商品分类样式*/
.floor_goods{
padding: 0 5rpx;
}
.floor_goods .floorTitle{
margin: 20rpx 0 0;
}
.floor_goods .floorTitle image{
width: 100%;
}
.floorList{
overflow: hidden; /*清除子元素对父元素的浮动影响*/
}
.floorList navigator{
width: 33.33%;
float: left;
padding: 5rpx;
box-sizing: border-box;
}
.floorList .bigImg{
height: 404rpx;
}
.floorList .smallImg{
height: 202rpx;
}
.floorList navigator image{
width: 100%;
height: 100%;
display: block;
}
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperData: [], //存放轮播图数据
catitemsData:[], //存放导航图标数据
floorData:[] //存放商品分类数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数，this指向最大的函数Page
this.getSwiperData();
this.getCatitems();
this.getFloorData();
},
//获取轮播图数据的函数
getSwiperData:function (){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
swiperData:res.data.message
})
console.log(this.data.swiperData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
//获取导航图标函数
getCatitems(){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
catitemsData:res.data.message
})
console.log(this.data.catitemsData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
//获取商品分类数据函数
getFloorData(){
//发送网络请求
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
floorData:res.data.message
})
console.log(this.data.floorData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最终成果：
最后进行代码优化
//封装一个方法用于请求数据
//export：公开该方法
export var request =(params) =>{
console.log("params==>",params)
//默认路径
var baseUrl ="https://api-hmugo-web.itheima.net/api/public/v1";
return new Promise((resolve,reject)=>{
wx.request({
url: baseUrl+params.url,
success:(res)=>{
//console.log("成功回调==》",res)
//resolve("promise成功调用返回的值")
resolve(res.data.message)
},
fail:(err) =>{
//console.log("失败回调==》",err)
//reject("promise调用失败返回的值")
reject(err)
}
})
})
}
// pages/index/index.js
//导入自己封装的方法
import { request }from "../../request/index"
Page({
/**
* 页面的初始数据
*/
data: {
swiperData: [], //存放轮播图数据
catitemsData:[], //存放导航图标数据
floorData:[] //存放商品分类数据
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//调用函数，this指向最大的函数Page
this.getSwiperData();
this.getCatitems();
this.getFloorData();
},
//获取轮播图数据的函数
getSwiperData:function (){
//发送网络请求
/* wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
swiperData:res.data.message
})
console.log(this.data.swiperData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})*/
request({url:"/home/swiperdata"})
.then(res =>{
console.log("res==>",res)
//数据更新，响应式更新页面数据
this.setData({
swiperData:res
})
})
},
//获取导航图标函数
getCatitems(){
//发送网络请求
/*wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
catitemsData:res.data.message
})
console.log(this.data.catitemsData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})*/
request({url:"/home/catitems"})
.then(res =>{
console.log("res==>",res)
//数据更新，响应式更新页面数据
this.setData({
catitemsData:res
})
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
//获取商品分类数据函数
getFloorData(){
//发送网络请求
/*wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
success : (res) =>{
console.log("请求成功==》",res)
//数据更新，响应式更新页面数据
this.setData({
floorData:res.data.message
})
console.log(this.data.floorData)
},
fail : (err) =>{
console.log("请求失败==》",err)
}
})*/
request({url:"/home/floordata"})
.then(res =>{
console.log("res==>",res)
//数据更新，响应式更新页面数据
this.setData({
floorData:res
})
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
到此结束了，谢谢观看。
