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

Bertha 。 2021-07-25 17:12 548阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

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

--------------------

##### 首页custom 顶部搜索框 #####

![在这里插入图片描述][20191204142107475.png]

<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,
        })
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/9fd18d545c4a46d68f1091fe4c18d95e.png
[20191204142107475.png]: /images/20210725/eca0fe360a5844049489db369e4a08cf.png