夜光带你走进 微信小程序开发（三十五）擅长的领域

夜光序言：

 

爱恋是那么甜蜜，却也那么苦涩；但就算北风冷冽伤人，冬阳也教人心里温暖明亮

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

 

 

 

但是图片看起来有点奇怪嗯

 

 

<!-- <view>首页
<text  class="iconfont icon-gouwuchekong"></text>
</view> -->

<view class="pyg_index">
   <!-- 搜索框开始 -->
   <SearchInput></SearchInput>
   <!-- 搜索框结束 -->

   <!-- 轮播图开始 -->
   <view class="index_swiper">
      <swiper class="Top" autoplay="true" circular="true" indicator-dots="true">
         <swiper-item
         wx:for="{{swiperList}}"
         wx:key="goods_id"
         >
             <navigator>
                 <image class="pic1" src="{{item.image_src}}" mode="widthFix"></image>
             </navigator>
         </swiper-item>
      </swiper>
   </view>
   <!-- 轮播图结束 -->

   
   <!-- 导航页面开始 -->
   <view class="index_cate">
        <navigator
        wx:for="{{cateList}}"
        wx:key="name"
        class="pic2"
        >
        <image mode="widthFix" src="{{item.image_src}}" class="pic3"></image>
        
        </navigator>
   </view>
   <!-- 导航页面结束 -->

   <!-- 楼层开始 -->
   <view class="index_floor"
   wx:for="{{floorList}}"
   wx:for-item="item1"
   wx:for-index="index1"
   wx:key="floor_title"
   >
      <view class="floor_group">
      <!-- 标题 -->
      <view class="floor_title">
          <image class="pic4" mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
      </view>
      <!-- 内容 -->
      <view class="floor_list">
          <navigator
          class="navigator_2"
          wx:for="{{item1.product_list}}"
          wx:for-item="item2"
          wx:for-index="index2"
          wx:key="name"
          >
            <image class="pic5" mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
          </navigator>
      </view>
      </view>
   </view>
  
   <!-- 楼层结束 -->


</view>

 

.index_swiper{
  /* width: 100%; */
}

.Top{
  width: 750rpx;
  height: 340rpx;
}


.pic1{
  width: 100%;
}

.index_cate{
  display: flex;
}

.pic2{
  flex: 1;
  padding: 20rpx;
}

.pic3{
  width: 100%
}

.index_floor navigator:nth-last-child(-n+4){
   height: 27.72711207vw;
}


.floor_group navigator:nth-last-child(-n+4){
   height: 27.72711207vw;
}


.floor_title{

}

.floor_list navigator:nth-last-child(-n+4){
   height: 27.72711207vw;
}

.pic4{
  width: 100%;
}

.pic5{
  width: 100%;
  height: 100%;
}

.navigator_2{
  float: left;
  width: 33.3%;
  
}

 

 

 

 

大家可以去搜索一下如何让webstorm加载less

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

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

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

		.floor_list {
			navigator {
				float:left;
				width:33.3%;
              //后四个超链接
              &:nth-last-child(-n+4){
                //原图的宽度 232*386
                //第一张图片效果如下~
                     height: 33.33vw * 386/ 232 /2;
              }
				image{
					width:100%;
                    height: 100%;
				}
			}
		}
	}
}

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}
.index_cate {
  display: flex;
}
.index_cate navigator {
  padding: 20rpx;
  flex: 1;
}
.index_cate navigator image {
  width: 100%;
}
.index_floor .floor_group .floor_title image {
  width: 100%;
}
.index_floor .floor_group .floor_list navigator {
  float: left;
  width: 33.3%;
}
.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4) {
  height: 27.72711207vw;
}
.index_floor .floor_group .floor_list navigator image {
  width: 100%;
  height: 100%;
}