16 首页

16.1 页面骨架

16.2修改默认样式

css

/* 在微信小程序中 不支持 通配符 '*' */
page,view,text,swiper,swiper-item,image,navigator{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
 主题颜色 通过变量来实现 
 1 less 中 存在 变量这个知识
 2 原生的css和wxss也是支持 变量 
 */
 page{
   /* 定义主题颜色 */
   --themeColor:#FF0000;
   /*
    定义统一字体大小  假设设计稿 大小是 375px 
    1px= 2rpx
    14px = 28rpx
     */
     font-size: 28rpx;
 }

 image{
   width: 100%;
 }

16.3 添加导航页面

页面

html

<navigator class="si" target=""  hover-class="navigator-hover">
    搜索
</navigator>

样式

css

.si{

    font-size: 30rpx;
    height: 75rpx;
    text-align: center;
    line-height: 75rpx;
    border: 6rpx solid red;
    border-radius: 10rpx;
    color: grey;
    margin: 5rpx;
}

引入导航页面

json

{
  "usingComponents": {
      "SearchInput":"../../component/SearchInput/SearchInput"
  }
}

16.4 第一次封装请求


export const request =  (params)=>{

    // console.log(params.url);
    //默认Base路径
    const  baseUrl = "https://www.fulfill.com.cn/api/v1";
    // const  baseUrl = "http://127.0.0.1/api/v1";

    //加载loading
    wx.showLoading({
        title: "加载中",
        mask: true,
    });
      

    return new Promise((resolve,reject)=>{
        wx.request({
            // ...params,
            url: baseUrl+params.url ,
            fail:(err)=>{
                reject(err);    
            },
            success: (res) => {
                let result = res.data;
                if(result.meta.code === 200){
                    let data = result.message;
                    resolve(data);
                }
            },
            complete:()=>{
                //取消loading
                wx.hideLoading();
            }
        });
    })
}

请求调用

//加载轮播图数据
    loadSwiper: function () {

        request({
            url: '/home/swiperdata'
        }).then((swiperList) => {
            this.setData({
                swiperList
            })
        })
    },

    //加载商品分类导航
    loadCate: function () {
        request({ url: '/home/catitems' }).then((categoriesList) => {
            console.log("使用封装之后的 request工具");
            this.setData({
                categoriesList
            })
        })

    },
     //加载商品分类导航
     loadFloorData: function () {
        request({ url: '/home/floordata' }).then((floorList) => {
            // console.log("使用封装之后的 request工具");
            this.setData({
                floorList
            })
        })

    }

16.5 加载楼层信息

设置后四张图的高度是前面导航的一半

?: 前面 (第一)navigator的高度

原始宽 / 原始高 = 缩放后的宽度/ 缩放之后的高

232 / 386 = 33.33vw / ?

缩放之后的高度（第一张图）： 33.33vw * 386/ 232

让容器的高度跟第一张图保持一致: 33.33vw * 386/ 232

其余四张图片包裹在nagivator中，让nagivator的高度，是容器的50%,图片在nagivator中宽高: 100%

16 首页 ​

16.1 页面骨架 ​

16.2修改默认样式 ​

16.3 添加导航页面 ​

16.4 第一次封装请求 ​

16.5 加载楼层信息 ​