微信小程序学习2《导航栏、首页楼层》

悠悠 2022-12-10 07:23 185阅读 0赞

> [上一篇 微信小程序学习1《语法、创建项目、tabbar、搜索框、轮播图》][_1_tabbar]

--------------------

### 目录 ###

*  一、导航栏
 *   *  1、发起请求
     *  2、编写页面
     *  3、编写样式
     *  4、效果
 *  二、首页-楼层1
 *   *  1、发起请求
     *  2、编写页面
     *  3、样式
     *  4、效果

# 一、导航栏 #

## 1、发起请求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 1]

//导入
    import { request} from "../../request/index.js";
    
    //Page Object
    Page({ 
      data: { 
        swiperList:[],//轮播图数组
        catesList: [],//导航栏
        
      },
      //页面开始就会加载
      onLoad: function(options) { 
        // 1 发送异步请求获取数据
        // var reqTask = wx.request({ 
          // url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
          // success: (result) => { 
          // console.log(result); 
          // this.setData({ 
          // swiperList:result.data.message
          // })
          this.getSwiperList();
          this.getCatesList();
    
      },
    
      //获取轮播图数据
      getSwiperList(){ 
        request({ url:"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})
        .then(result=>{ 
          this.setData({ 
              swiperList:result.data.message
          })
        })
      },
    
        //获取导航栏数据
        getCatesList(){ 
          request({ url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"})
          .then(result=>{ 
            this.setData({ 
                catesList:result.data.message
            })
          })
        },
    
    
    });

## 2、编写页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 2]

<view class="index_cate">
        <navigator 
        wx:for="{ {catesList}}"
        wx:key="name"
        >
          <image mode="widthFix" src="{ {item.image_src}}"></image>
        </navigator>
      </view>

## 3、编写样式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 3]

.index_cate{ 
        display: flex;
        navigator{ 
            padding: 20rpx;
            flex:1;
            image{ 
                width: 100%;
            }
        }
    }

## 4、效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 4]

# 二、首页-楼层1 #

## 1、发起请求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 5]

//获取分类图数据
       getFloorList(){ 
        request({ url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"})
        .then(result=>{ 
          this.setData({ 
            floorList:result.data.message
          })
        })
      },

## 2、编写页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 6]

<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 mode="widthFix" src="{ {item1.floor_title.image_src}}"></image>
          </view>
          
          <view class="floor_list">
            <navigator 
            wx:for="{ {item1.product_list}}"
            wx:for-item="item2"
            wx:for-index="index2"
            wx:key="name"
            url="{ {item2.navigator_url}}"
            >
            <image mode="{ {index2===0?'widthFix':'scaleToFill'}}" src="{ {item2.image_src}}"></image>
          </navigator>
          </view>
        </view>
      </view>

## 3、样式 ##

.index_floor{ 
      
        .floor_group{ 
          .floor_title{ 
            padding: 10rpx 0;
            image{ 
              width: 100%;
            }
          }
          .floor_list{ 
            // 清除浮动
            overflow: hidden;
            navigator{ 
              float: left;
              width: 33.33%;
      
            /* 后四个超链接 */
            &:nth-last-child(-n+4){ 
            /* 原图的宽高 232 *386 */
            // 232 / 386 = 33.33vw / height
            // 第一张图片的高度 height:33.33vw * 386 / 232
            height:33.33vw * 386 /  232 /2 ;
      
            border-left: 10rpx solid #fff;
            }
      
            /* 2 3 两个超链接 */
            &:nth-child(2),
            &:nth-child(3){ 
              border-bottom: 10rpx solid #fff;
            }
              image{ 
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

## 4、效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 7]

--------------------

> [上一篇 微信小程序学习1《语法、创建项目、tabbar、搜索框、轮播图》][_1_tabbar]

[_1_tabbar]: https://blog.csdn.net/m0_45234510/article/details/108514836
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/21cdd936f7f14e218bb23c2c73b24ebf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/2733488b32a44ba1a941e7576e7131c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/adeedf19904e41ed9de2038ac657be1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/6ff6a86974d64d6d95f046c5b0f7f231.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/1ff4953919004aa985e1b24b1170ee8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/729b5ceb8ced4e46b386599507f67229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/9e1ec344d2c04e0ca6f2ca92eb0354f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MjM0NTEw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/16bc60893b0a4d2e81c2a314cc8fa6c9.png