微信小程序首页的基本内容

wxml

<!-- 首部的搜索点击事件    内容是js中-->
<view class="indexpage">
    <mysearch bind_init="__initComponent"></mysearch>
 
     <!--轮播图请求内容 -->
    <swiper indicator-dots autoplay circular class="swiperbox">
        <block wx:for="{{swiperData}}" wx:key="goods_id">
            <swiper-item>
                <image mode="widthFix" src="{{item.image_src}}" class="swiperimg"></image>
            </swiper-item>
        </block>
    </swiper>
   
 <!-- 主题选择   分类图标有点击事件（跳转tabbar页面）-->
    <view class="catebox">
      <image data-index="{{index}}" wx:for="{{cateData}}" wx:key="image_src" mode="widthFix" src="{{item.image_src}}" data-wpy-evt="2-0" bind:tap="__dispatcher" class="cateimg"></image>
    </view>

  <!--这个简单就是写盒子嵌套图片 无功能 -->
    <view class="floorbox">
      <view wx:for="{{floorData}}" wx:key="index" class="flooritem">
          <image src="{{item.floor_title.image_src}}" mode="widthFix" class="titleimg">
          </image>

   <!--循环图片 并且将第一张图比例为长方形 -->
          <view class="contentimg">
            <image wx:for="{{item.product_list}}" src="{{item.image_src}}" wx:key="image_src" style="width: {{item.image_width}}rpx;" class="cimg {{index==0?'oneimg':''}}">
     </image>
          </view>
      </view> </view></view>

js

"use strict";
var _core = _interopRequireDefault(require('./../vendor.js')(0));
var _request = _interopRequireDefault(require('./../request/request.js'));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
// import pai from '../request/request'
_core["default"].page({
  data: {
    swiperData: [],
    cateData: [],
    floorData: []
  },
  onLoad: function onLoad() {
    // 轮播图
    this.getSwiperData(); // 分类导航
    this.getCateData(); // 楼层
    this.getFloorData();
  },
  methods: {
    // 请求轮播图的数据
    getSwiperData: function getSwiperData() {
      var _this = this;
      var vm = this;
      (0, _request["default"])({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
      }).then(function (res) {
        _this.swiperData = res;
      });
      (0, _request["default"])({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
      }, function (res) {
        console.log(res);
        vm.swiperData = res;
      }); 
    },
    // 请求分类导航的数据
    getCateData: function getCateData() {
      var _this2 = this;
      (0, _request["default"])({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'
      }).then(function (res) {
        _this2.cateData = res;
      }); 
    },
    // 点击分类导航
    toCate: function toCate(e) {
      console.log(e);
      var index = e.currentTarget.dataset.index; // 0 1 2 3
      console.log(index); // 小程序跳转至tabbar页面
      if (index == 0) {
        wx.switchTab({
          url: '/pages/cate'
        });
      }
    },
    // 请求楼层的函数
    getFloorData: function getFloorData() {
      var _this3 = this;
      (0, _request["default"])({
        url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'
      }).then(function (res) {
        _this3.floorData = res;
      });
    }
  }
}, {info: {"components":{"mysearch":{"path":"./../components/mysearch"}},"on":{}}, handlers: {'2-0': {"tap": function proxy () {
  var $wx = arguments[arguments.length - 1].$wx;
  var $event = ($wx.detail && $wx.detail.arguments) ? $wx.detail.arguments[0] : arguments[arguments.length -1];
  var $args = $wx.detail && $wx.detail.arguments;
  var _vm=this;

  
  return (function () {
    _vm.toCate.apply(_vm, $args || [$event]);
  })();
}}}, models: {}, refs: undefined }, {info: {"components":{"mysearch":{"path":"./../components/mysearch"}},"on":{}}, handlers: {'2-0': {"tap": function proxy () {
  var $wx = arguments[arguments.length - 1].$wx;
  var $event = ($wx.detail && $wx.detail.arguments) ? $wx.detail.arguments[0] : arguments[arguments.length -1];
  var $args = $wx.detail && $wx.detail.arguments;
  var _vm=this;

  return (function () {
    _vm.toCate.apply(_vm, $args || [$event]);
  })();
}}}, models: {}, refs: undefined }, {info: {"components":{"mysearch":{"path":"./../components/mysearch"}},"on":{}}, handlers: {'2-0': {"tap": function proxy () {
  var $wx = arguments[arguments.length - 1].$wx;
  var $event = ($wx.detail && $wx.detail.arguments) ? $wx.detail.arguments[0] : arguments[arguments.length -1];
  var $args = $wx.detail && $wx.detail.arguments;
  var _vm=this;

  return (function () {
    _vm.toCate.apply(_vm, $args || [$event]);
  })();
}}}, models: {}, refs: undefined });

wxss

.indexpage .swiperbox {
  width: 750rpx;
}
.indexpage .swiperbox .swiperimg {
  width: 750rpx;
}
.indexpage .catebox {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.indexpage .catebox .cateimg {
  width: 25%;
  padding: 20rpx;
}
.indexpage .floorbox .flooritem .titleimg {
  width: 750rpx;
  margin: 30rpx 0;
}
.indexpage .floorbox .flooritem .contentimg .cimg {
  height: 188rpx;
  float: left;
  margin: 8rpx;
}
.indexpage .floorbox .flooritem .contentimg .oneimg {
  height: 386rpx;
}