首页banner和热门品类组件提交 — review by 黄敬囿

 Component({
 Component({
   properties: {
   properties: {
-    
+    bannerList: {
+      type: Array,
+      value: []
+    }
   },
   },
   data: {
   data: {
     
     

-<swiper class="swiper" indicator-dots="true"  autoplay="true" 
-interval="3500" circular='true' indicator-color='rgba(255,255,255,0.2)' indicator-active-color="rgba(255,255,255,1)">
-    <block wx:for="{{data}}"  wx:key="{{index}}">
+<swiper class="banner" indicator-dots="true"  autoplay="true" 
+interval="3500" circular="true" indicator-color='rgba(255,255,255,0.2)'
+ indicator-active-color="rgba(255,255,255,1)">
+    <block wx:for="{{ bannerList }}"  wx:key="{{index}}">
       <swiper-item>
       <swiper-item>
-        <image src="{{item.src}}" class="new-focus-img-1" mode=' scaleToFill 'data-url="{{item.url}}" data-src='{{item._src}}
- 'data-type="go.list" data-title='{{item.title}} 'data-jump_rule="{{item.url}}" data-f_id="{{f_id}}" data-f_index='{{f_index}}
- ' bindtap="jumpByRule" data-f_inindex='{{index}} ' data-f_name='{{f_name}} '/>
+        <image src="{{item.src}}" class="new-focus-img"
+         mode="aspectFill "data-url="{{item.url}}" 
+         data-src="{{item._src}}" data-type="go.list" 
+         data-title="{{item.title}}" data-jump_rule="{{item.url}}"
+          data-f_id="{{f_id}}" data-f_index="{{f_index}}" 
+          bindtap="jumpByRule" data-f_inindex="{{index}}" 
+          data-f_name="{{f_name}}"/>
       </swiper-item>
       </swiper-item>
     </block>
     </block>
-  </swiper>
+</swiper>

+.banner {
+  width: 750rpx;
+  height: 562rpx;
+}
+
+.banner .wx-swiper-dots.wx-swiper-dots-horizontal{
+  margin-bottom: -8rpx;
+  padding-left: 15rpx;
+  padding-right: 10rpx;
+  padding-top: 5rpx;
+  padding-bottom: 5rpx;
+  border-radius: 40rpx; 
+  background: rgba(0,0,0,0.2);
+}
+
+.banner .wx-swiper-dot{
+  width:10rpx;
+  display: inline-flex;  
+  height: 10rpx;
+  margin-left: -5rpx;  
+  justify-content:space-between;  
+}
+
+.new-focus-img {
+  width: 100%;
+  height: 100%;
+}

+Component({
+  properties: {
+    categoryList: {
+      type: Array,
+      value: []
+    }
+  },
+  data: {
+    windowWidth: 750
+  },
+  methods: {
+    
+  }
+})

+{
+  "component": true
+}

+  <view class="catgoryContainer">
+    <block wx:for="{{categoryList}}" wx:key="{{index}}">
+      <view class="category" bindtap="jumpByRule" style="width: {{(750 - 3)/4}}rpx;border-right:{{index % 4 == 3 ? '0rpx' : '1rpx #dddddd solid;'}}"
+      data-jump_rule="{{item.url}}" data-url="{{item.url}}" 
+      data-index="{{index}}"data-f_id="{{f_id}}" 
+      data-f_index='{{f_index}}' data-f_inindex='{{index}}' 
+      data-f_name='{{f_name}}'> 
+        <image class="categoryImage" src="{{item.src}}" 
+        style="height: {{(windowWidth-3)/4 + 10}}rpx;" mode="aspectFill"/>
+      </view>
+    </block>
+  </view>

+
+.catgoryContainer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  background-color: white;
+  border-top: 1rpx solid #dddddd;
+}
+.category {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-bottom: 1rpx solid #dddddd; 
+}
+.categoryImage {
+  width: 100%;
+}

@@ -2,9 +2,27 @@ const app = getApp()
 
 
 Page({
 Page({
   data: {
   data: {
-
+    'bannerList': [
+      {'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
+      {'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'},
+      {'src': 'http://img10.static.yhbimg.com/yhb-img01/2018/11/16/09/0159de652b1e164b2166e7665a0c329e4d.jpg'}
+    ],
+    'categoryList':  [
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'},
+      {'src': 'http://img11.static.yhbimg.com/yhb-img01/2018/11/19/10/016b55c411c314f020b943e3cd663299a7.jpg'}
+    ]
   },
   },
   onLoad: function () {
   onLoad: function () {
-    console.log('头条小程序代码片段，可点击以下链接查看代码片段的详细文档')
+    
   },
   },
 })
 })

+{
+  "usingComponents": {
+    "home-banner": "../../components/home-banner/home-banner",
+    "home-hot-category": "../../components/home-hot-category/home-hot-category"
+  }
+}

-<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档</view>
+<home-banner banner-list="{{bannerList}}"></home-banner>
+<home-hot-category category-list="{{categoryList}}"></home-hot-category>