仿美团购物车吸顶

//帮助一位同行实现仿美团购物车吸顶，有需要的可以参考代码。

//wxml
 

		
			
				{{classify.classifyName}}
			
		



    

    
        
            
              {{item.name}}
            
            
            
					
					{{ct.name}}
					￥{{ct.price}}
          
          
                   
              
            {{ct.num}}
				
					    
					
          
				
        
        
    


	








 

//wxss
/* pages/obj/obj.wxss */
page {
margin: 0 auto;
padding: 0;
}
/* .i-sticky-demo-item{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  padding:0 30rpx;
  border-bottom: 1rpx solid #ddd;
} */
.container1{
  overflow: hidden;
}

.lin{
   width: 100%;
  background-color:#e7e4e4; 
}


.seat{
  width:100%;
  height:55rpx;
  color: #fff;
  font-size: 40rpx;
  display: flex;
  justify-content: row;
  line-height: 55rpx;
}
.seat image{
  width: 35rpx;
  height: 40rpx;
}

 /* 优惠券*/
.coupon-center{
  position: relative;
  width: 100%;
  height: 200rpx;
  background-size: 100% 100%;

  display: flex;
  color: white;
  justify-content: space-between;

}
.coupon-center-left{
  width: 35%;
  height: 100%;
  display: flex;
  margin-left: 20rpx;
  font-size: 60rpx;
  justify-content: space-between;
  border-right: 3rpx dashed #f7f7f7;
}
.coupon-center-left-left{
  height: 100%;
  line-height: 160rpx;
}
.money{
  position: absolute;
   font-size:130rpx;
   top: 35rpx;
   left: 80rpx;
}
.subtraction{
  font-size: 38rpx;
}
.hh{
  position: relative;
  width: 100%;
  background-color: #fff;
  border-bottom: 1rpx solid #ddd;
  height: 200rpx;
}
.names{
position: absolute;
left: 215rpx;
width: 200rpx;
top: 35rpx;
}
/* 列表商品价格 */
.price{
position: absolute;
left: 215rpx;
color: #f45044;
top: 90rpx;
}
.click{
  width: 240rpx;
  font-size: 33rpx;
  background-color: #FFA500;
  border-radius: 48rpx;
  height: 60rpx;
  line-height: 60rpx; 
position: relative;
  top: 0;
}
.coupont-center-right{
  /* position: relative;
  top: 0; */
  font-size: 28rpx;
  text-align: center;
}

.center-left{
  width:70%;
}
.fastener{
  display: flex;
  justify-content: space-between;
}




.content-container {

  width: 76%;
  float: right;
}
.titles{
  width: 180rpx;
  background: #feb70f;
  color: #ffffff;
 font-size:38rpx;
 height:69rpx;
 display:flex;
 justify-content:center;
 align-items:center;
}
.tit{
  padding:0 30rpx;
}
.classify-container {
	width: 180rpx;
	background: #ddd;
	/* height: 100%; */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #666;
    z-index: 1
}
.classify-container .classify {
	padding: 35rpx 30rpx;
	text-align: center;
}
.classify-container .classify.active {
	background: #fff;
}
.classify-container .classify.active.name{
 display:inline-block;
 font-size:30rpx;
 font-weight: 600;
 color:#000;
 line-height:1.2;
 text-align:left;
 pointer-events:none;
}
.classify-container .classify .name {
	display: inline-block;
	font-size: 30rpx;
	color: #646464;
	line-height: 1.2;
	text-align: left;
	pointer-events: none;
}

.goods-container {
	-webkit-flex: 1;
	background: #ffffff;
  
	/* height: 100%; */
}
.goods-container .title {
	padding: 20rpx 25rpx;
	color: #646464;
	font-size: 30rpx;
	line-height: 30rpx;
	background: #f6f8f7;
}
.goods-container .goods {
	position: relative;
	padding: 20rpx 0rpx;
	font-size: 36rpx;
  margin-top: 30rpx;
	/* border-bottom: 1px solid #f7f7f7; */
}
.goods-container .goods .pic {
  position: relative;
	float: left;
	width: 140rpx;
	height: 170rpx;
	margin-right: 15rpx;
  margin-left: 15rpx;
}
.goods-container .goods .name {
	color: #000;
	font-size: 36rpx;
}
.goods-container .goods .sold {
	color: #989898;
	font-size: 30rpx;
}
.goods-container .goods .price {
	color: #f45044;
	font-size: 36rpx;
  margin-top: 50rpx;
  font-weight:600;
}
.goods-container .goods .addCart , .minu {
position: relative;
margin-right: 8rpx;
margin-top: 35rpx;
}
.goods-container .goods .addCart image{
width: 53rpx;
height: 53rpx;
margin-top:50rpx;
margin-left:10rpx;
}
.goods-container .goods .minu image{
width: 53rpx;
height: 53rpx;
margin-top:50rpx;

}
.text{
  font-size:38rpx;
 position: absolute;
 right: 30rpx;
 top: 30rpx;
}

//js
var app = getApp();
Page({
  data: {
    one: [{
        name: "热销",
        item: [{
            id: 1,
            name: '面条',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '粉丝',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '宽粉',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '细粉',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '土豆粉',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '蕨根粉',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '细面',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '宽面',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '白面',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '豆面',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '挂面',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          }

        ]
      },
      {
        name: "新品",
        item: [{
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          }, {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
        ]
      },
      {
        name: "蔬菜",
        item: [{
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          }, {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
          {
            id: 1,
            name: '娃娃菜',
            pic: '../../img/aaa.jpg',
            sold: 1014,
            price: 2,
            num: 0,
          },
        ]
      },





    ],

    goods: {
      1: {
        id: 1,
        name: '娃娃菜',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
        sold: 1014,
        price: 2,
        num: 0,
      },
      2: {
        id: 2,
        name: '金针菇',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
        sold: 1029,
        price: 3,
        num: 0,
      },
      3: {
        id: 3,
        name: '方便面',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
        sold: 1030,
        price: 2,
        num: 0,
      },
      4: {
        id: 4,
        name: '粉丝',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
        sold: 1059,
        price: 1,
        num: 0,
      },
      5: {
        id: 5,
        name: '生菜',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
        sold: 1029,
        price: 2,
        num: 0,
      },
      6: {
        id: 6,
        name: '白菜',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
        sold: 1064,
        price: 2,
        num: 0,
      },
      7: {
        id: 7,
        name: '杏鲍菇',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/2.jpg',
        sold: 814,
        price: 3,
        num: 0,
      },
      8: {
        id: 8,
        name: '香菇',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
        sold: 124,
        price: 3,
        num: 0,
      },
      9: {
        id: 9,
        name: '猴头菇',
        pic: 'http://wxapp.im20.com.cn/impublic/waimai/imgs/goods/1.jpg',
        sold: 102,
        price: 5,
        num: 0,
      }
    },
    goodsList: [{
      id: 'hot',
      classifyName: '热销',
      goods: [1, 2, 3]
    },
    {
      id: 'new',
      classifyName: '新品',
      goods: [4, 5]
    },
    {
      id: 'vegetable',
      classifyName: '蔬菜',
      goods: [6, 7]
    },
    {
      id: 'mushroom',
      classifyName: '蘑菇',
      goods: [8]
    },
    {
      id: 'food',
      classifyName: '主食',
      goods: [9]
    }
    ],

     
    scrollTop: 0,
    cart: {
      count: 0,
      total: 0,
      list: {}
    },
    selected: 0,
    showCartDetail: true,
    scrollTop: 0,
    menuFixed: false,
    hidden: false
  },
  //页面滚动执行方式
  onPageScroll(event) {
    this.setData({
      scrollTop: event.scrollTop
    })
  },
//  选中
  tapClassify: function(e) {
    console.log(e)
    var id = e.target.dataset.id;
    this.setData({
      classifyViewed: id
    });
    var self = this;
    setTimeout(function() {
      self.setData({
        classifySeleted: id
      });
    }, 100);
  },


})

 

 

//json
{
  "navigationBarTitleText": "吸顶",
  "usingComponents": {
    "i-sticky": "../../dist/sticky/index",
    "i-sticky-item": "../../dist/sticky-item/index"
  }
}

 //组件可以找我要，或者访问ivew weapp 下载。