首页 > 编程语言> 文章详细

从0开始的购物微信小程序（贰）首页模块开发

2021-05-13 11:00:14 阅读：184 来源： 互联网

标签：index group floor 微信 image 首页模块 navigator wx

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标签不可使用

标签：index,group,floor,微信,image,首页,模块,navigator,wx
来源： https://blog.csdn.net/weixin_49639325/article/details/116721843

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9