首页 > 其他分享 >小兔鲜儿 uniapp - 首页模块 请求封装2月摸鱼计划04

小兔鲜儿 uniapp - 首页模块 请求封装2月摸鱼计划04

时间:2024-02-06 21:03:21浏览次数:27  
标签:flex 自定义 04 uniapp 鲜儿 height padding 适配 size

小兔鲜儿 - 首页模块

涉及知识点:组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。

自定义导航栏

参考效果:自定义导航栏的样式需要适配不同的机型。

小兔鲜儿 uniapp - 首页模块 请求封装2月摸鱼计划04_搜索

操作步骤

  1. 准备组件
  2. 隐藏默认导航栏,修改文字颜色
  3. 样式适配 -> 安全区域

静态结构

新建业务组件:src/pages/index/componets/CustomNavbar.vue

<script setup lang="ts">
//
</script>

<template>
  <view class="navbar">
    <!-- logo文字 -->
    <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 -->
    <view class="search">
      <text class="icon-search">搜索商品</text>
      <text class="icon-scan"></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 自定义导航条 */
.navbar {
  background-image: url(@/static/images/navigator_bg.png);
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;
    padding-left: 30rpx;
    .logo-image {
      width: 166rpx;
      height: 39rpx;
    }
    .logo-text {
      flex: 1;
      line-height: 28rpx;
      color: #fff;
      margin: 2rpx 0 0 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10rpx 0 26rpx;
    height: 64rpx;
    margin: 16rpx 20rpx;
    color: #fff;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.5);
  }
  .icon-search {
    &::before {
      margin-right: 10rpx;
    }
  }
  .icon-scan {
    font-size: 30rpx;
    padding: 15rpx;
  }
}
</style>

安全区域

不同手机的安全区域不同,适配安全区域能防止页面重要内容被遮挡。

可通过 uni.getSystemInfoSync() 获取屏幕边界到安全区的距离。

小兔鲜儿 uniapp - 首页模块 请求封装2月摸鱼计划04_搜索_02

核心代码参考

自定义导航配置

// src/pages.json
{
  "path": "pages/index/index",
  "style": {
    "navigationStyle": "custom", // 隐藏默认导航
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "首页"
  }
}

组件安全区适配

<!-- src/pages/index/componets/CustomNavbar.vue -->
<script>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <!-- 顶部占位 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <!-- ...省略 -->
  </view>
</template>

标签:flex,自定义,04,uniapp,鲜儿,height,padding,适配,size
From: https://blog.51cto.com/u_15520592/9631394

相关文章

  • 2月摸鱼计划04 Go语言依赖管理
    2.0依赖管理这一章我们主要讲解go的依赖管理,主要涉及go依赖管理的演进路线和gomodule实践依赖指各种开发包对于helloworld以及类似的单体函数只需要依赖原生SDK,而实际工程会相对复杂,我们不可能基于标准库0~1编码搭建,而更多的关注业务逻辑的实现,而其他的涉及框架、日志、driver......
  • Ubuntu18.04定时备份MySQL、PostgreSQL数据库
    1、备份MySQL数据库脚本LOG_DATE=`date+'%Y-%m-%d%H:%M:%S'`LOG_PATH=/home/dbserver/script_data/backup.logecho"$LOG_DATE=======>开始备份以下mysql数据库:">>${LOG_PATH}DUMP=/usr/bin/mysqldumpOUT_DIR=/home/dbserver/backup/mysql_backupLINU......
  • ERROR 1044 (42000): Access denied for user 'root'@'%' to database 'mysql&
    转自https://www.cnblogs.com/jiangfeilong/p/10560754.html 关键要授予 WITHGRANTOPTION;#原因:修改数据库账号时删除了默认的localhostroot, 新建了%root 但没有赋予全部权限;解决方法:1.关闭数据库#mysqldstop2.在my.cnf里加入skip-grant-tables3.停止服务器......
  • Java微服务SpringCloud+Uniapp+Vue3+Element Plus开源BizSpring商城
    产品介绍BizSpring电商平台概述BizSpring电商平台,是基于最新SpringCloud微服务架构开发的多语言电商平台,使用领先的Vue3.0+ElementPlus+uniapp技术开发的移动全端业务、实现了多平台同步构建及建设的解决方案。应用发布基于Uni-app,实现跨多个平台(H5、公众号、头条、抖音......
  • SQL数据库入门04:数据查询操作
      本文介绍基于MicrosoftSQLServer软件,实现数据库表中多种数据查询方法的具体操作。(数据库基础(四):数据查询)  系列文章中示例数据来源于《SQLServer实验指导(2005版)》一书。依据本系列文章的思想与对操作步骤、代码的详细解释,大家用自己手头的数据,可以将相关操作与分析过程......
  • 2.4 響け恋の歌 ——ARC古报 104~106
    本来想一次放五场的,但是感觉实在是太多了,题解写起来很累,就改为三场了。以后没活了就写这个。ARC多的是,所以近阶段就不会没活啦!ARC104DMultisetMean对于\(x\),我们只需要求出\([0,x-1]\)的元素组合的背包,以及\([1,n-x]\)的元素组合的背包,然后再做点乘即可。做背包的时候......
  • 小兔鲜儿 uniapp - uni.request 请求封装 2月摸鱼计划03
    uni.request请求封装添加请求和上传文件拦截器uniapp拦截器:uni.addInterceptor接口说明:接口文档实现步骤基础地址超时时间请求头标识添加token参考代码//src/utils/http.tsconsthttpInterceptor={//拦截前触发invoke(options:UniApp.RequestOptions){//1.......
  • 一套模板搞定二叉树算法题--二叉树算法讲解004
    1、二叉树经典习题模拟忘记知识点和技巧时,遇到一个新的二叉树习题,该如何处理思考和写代码解题?1.1、leetcode965题目和题意:题解1成员变量self.ans:题解2递归回传:1.2、leetcode257该题是个经典二叉树题目题目和题意:题解:分析,所有路径,每一个叶子节点都需要到达。到......
  • 【2024潇湘夜雨】WIN11_Pro_23H2.22635.3139软件选装纯净版2.04
    【系统简介】=============================================================1.本次更新母盘来自WIN11_Pro_23H2.22635.3139.2.增加部分优化方案,手工精简部分较多。3.OS版本号为22635.3139。精简系统只是为部分用户安装,个别要求高的去MSDN下。4.集成《DrvCeo-2.16.0.0》网卡版、运......
  • 洛谷题单指南-递推与递归-P1044 [NOIP2003 普及组] 栈
    原题链接:https://www.luogu.com.cn/problem/P1044题意解读:一组数入栈、出栈的方案数,如果了解卡特兰数,此题可以秒杀;如果不了解,也可以通过递归或者递推来解决;最次,可以通过DFS暴搜出方案数,当然对于n个数,一共有n次入栈、n次出栈,一共2n次,每次要么入栈要么出栈,总搜索次数在22n规模,n最......