本文主要是介绍从0开始的购物微信小程序（贰）首页模块开发，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.效果图

2.搜索组件

搜索组件将在项目中多次使用，所以将其封装为组件

2.1新建组件

在components目录下新建SearchInput文件夹，在其新建component，作相同命名

2.2编写组件

wxml，点击搜索跳转搜索页面

<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
  搜索
</navigator>
</view>

wxss样式

.search_input{
  height: 90rpx;
  padding: 10rpx;
  background-color: var(--themeColor);
}
.search_input navigator{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 15rpx;
  color: #666;
}

2.3引用组件

在index/index.json中配置组件

{
  "usingComponents":{
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "煞抖有"
}

2.4使用组件

在index/index.wxml中使用

<!-- 搜索框 -->
  <SearchInput></SearchInput>

效果

3.页面布局

<view class="pyg_index">
  <!-- 搜索框 -->
  <SearchInput></SearchInput>
  <!-- 轮播图 -->
  <view class="index_swiper">
    <swiper autoplay indicator-dots circular>
      <swiper-item
      wx:for="{{swiperList}}"
      wx:key="goods_id">
        <navigator url="{{item.navigator_url}}">
          <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
<!-- 导航 -->
  <view class="index_cate">
    <navigator
    wx:for="{{catesList}}"
    wx:key="name">
      <image mode="widthFix" src="{{item.image_src}}"></image>
    </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 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"
        >
          <image mode="{{index2===0?'widthFix':scaleToFill}}" src="{{item2.image_src}}"></image>
        </navigator>
      </view>
    </view>
  </view>
</view>

4.获取数据

// index.js
// 获取应用实例
const app = getApp()
//引入用来发送请求的方法 一定要把代码补全
import {request}from "../../request/index.js";
Page({
  data:{
    //轮播图数组
    swiperList:[],
    //导航数组
    catesList:[],
    //楼层数据
    floorList:[]
  },
  //页面开始加载 就会触发
  onl oad(){
    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({
      catesList:result
    })
  })
  },
    //获取楼层数据
    getFloorList(){
      request({url:'/home/floordata'})
      .then(result=>{
        this.setData({
          floorList:result
      })
    })
    }
})

5.搞样式

.index_swiper swiper image {
  width: 100%;
}

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}

.index_cate {
  display: flex;
}

.index_cate navigator {
  flex: 1;
  padding: 20rpx;
}

.index_cate navigator image {
  width: 100%;
}

.index_floor {}

.index_floor .floor_group {
  overflow: hidden;
}

.index_floor .floor_group .index_title {
  padding: 10rpx 0;
}

.index_floor .floor_group .index_title image {
  width: 100%;
}

.index_floor .floor_group .floor_list navigator {
  float: left;
  width: 33.33%;
}

.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
  /*232/386=33.33vw/height*/
  height: 27.72vw;
  border-left: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator:nth-child(2),
.index_floor .floor_group .floor_list navigator:nth-child(3) {
  /*232/386=33.33vw/height*/
  border-bottom: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator image {
  width: 100%;
  height: 100%;
}

完毕

-注意 img标签不可使用

这篇关于从0开始的购物微信小程序（贰）首页模块开发的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！