校内实训第八天学习笔记

今天主要是讲模拟实现美团外卖小程序的页面

.js

//index.js

//获取应用实例

const app = getApp()



Page({

  data: {

    top: ''

  },

  // 打开搜索页面

  newpage: function () {

    // 跳转到页面

    wx.navigateTo({

      url: '../scout/scout',

    })

  },

  // 滚动监听

  scrollTopfun: function (e) {

    this.setData({

      top: e.detail.scrollTop

    })

    // console.log(e.detail.scrollTop);

  },



  onLoad: function () {

  }

})

主要还是先实现页面布局的设计

.wxml

定位：

搜索栏：

商品分类：（实现滑动）

.wxss

/**index.wxss**/

page{

  height: 100%;

}



/* 定位区域 */

.locat{

  display: flex;

  align-items: center;

  padding: 0 20rpx;

}



.locat>text{

  margin-left: 10rpx;

  color: #999;

  font-size: 28rpx;

}



/* 搜索 */

.scout{

  background-color: #fff;

  display:flex;justify-content:center;

  align-items: center;

  padding: 20rpx 0;

  position: relative;

}

.scout>.img{

  width: 40rpx;

  height: 40rpx;

  position: absolute;

  left: 22rpx;

}

.scout>.ipt{

  width:90%;

background-color:#f0f5f8;border-radius:15rpx;

  padding: 8rpx 0rpx;

  padding-left: 50rpx;

}

.place{

  font-size: 28rpx;

}

.fixed{

  width: 100%;

  position: fixed;

  top: 0;

  z-index: 99;

}



.categoryList{

  width: 100%;

  height: 350rpx;

  border-bottom:20rpx solid #f4f4f4;

}

.category-info{

  display: inline-block;

  text-align: center;

  position: relative;

  margin-top: 20rpx;

  height: 150rpx;

  width: 25%;

}

.category-image{

  width: 95rpx;

  height: 95rpx;

}

.category-text{

  font-size: 25rpx;

  width: 100%;

  line-height: 30rpx

}

.header-title{

  text-align: center;

  width: 100%;

  height: 80rpx;

  line-height: 80rpx;

  font-size: 31rpx;

  font-weight: 600;

}

截图：