微信小程序——ColorUI快速开发首页手记

---

QQ 1285575001
Wechat M010527
技术交流 QQ群599020441
纪年科技aming

---

首页custom 顶部搜索框

<view class="page-container">  
  <view class="head">
    <custom-nav fixed="{{false}}" background="#A28A7D">
      <view><input type="text" /></view>
    </custom-nav>
  </view>
  <view class="section">
    <view wx:for="{{50}}" wx:key="index">text{{index}}</view>
  </view>
</view>

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.head input {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 64rpx;
}
.section {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

import { getMenuButtonBoundingClientRectLocal, isSupportNavigation } from '../../utils/storage'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const { bottom, paddingBottom } = getMenuButtonBoundingClientRectLocal()
    this.setData({
      isSupportNavigation: isSupportNavigation(),
      navHeight: bottom + paddingBottom,
    })
  },