微信小程序实训 Day 08 实习日志

今天开始讲另外一种功能的小程序，是仿美团外卖的，老师嫌另外一个本来的商城不好看换了美团外卖哈哈~

1.搜索框

学到了它的吸顶效果

.fixed{
  width: 100%;
  position: fixed;
  top:0;
  z-index: 99;
}

2.轮播图

  
    
    
    
      
        
        {{item.name}}
      
    
    
    
  

/* 美食 甜品 */
.categoryList{
  width: 100%;
  height: 360rpx;
  border-bottom:20rpx solid #f4f4f4; 
}
.category-info{
  display: inline-block;
  text-align: center;
  position: relative;
  margin-top: 20rpx;
  height: 150rpx;
  width: 20%;
}
.category-image{
  width: 80rpx;
  height: 80rpx;
}
.category-text{
  font-size: 25rpx;
  width: 100%;
  line-height: 30rpx
}
/* end 美食 甜品 */

3.让第二个菜单栏也可以固定在顶部，并且在第一个菜单栏下面

      
      综合排序
      
      
      
        销量高
      
      
        速度快
      
      
        减配送费
      
      筛选
      
  
  

.ffixed{
  width: 100%;
  position: fixed;
  top:80rpx;
  z-index: 98;
} 

4.今天完成的作业效果