相思资源网 Design By www.200059.com

具备基础

vue框架:vue官方文档

mpvue框架:mpvue官方文档

全局配置

"htmlcode">

"navigationStyle": "custom"
"window": {
 "backgroundTextStyle": "light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle": "black",
 "navigationStyle": "custom" // 这个配置
}

组件思维

"color: #ff0000">组件内容

"htmlcode">

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)

"htmlcode">

<template>
 <div class="top-bar">
 <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">
  <span class="title">{{title}}</span>
  <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
  <image class="icon" :src="/UploadFiles/2021-04-02/icon">

"bar"的div;另一部分是class="place-holder"的p;
"bar"的div都会遮挡内容区的问题;
"bar"的div的高度;

微信小程序系列之自定义顶部导航功能 "font-size: medium; font-family: "Microsoft YaHei"; white-space: normal; text-transform: none; word-spacing: 0px; font-weight: 400; color: rgb(0,0,0); font-style: normal; text-align: center; orphans: 2; widows: 2; letter-spacing: normal; text-indent: 0px; font-variant-ligatures: normal; font-variant-caps: normal; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial">微信小程序系列之自定义顶部导航功能 "htmlcode">

props: {
 title: {
 type: String,
 required: true
 },
 icon: {
 type: String,
 default: require('@static/icon/icon_back.png')
 },
 way: {
 type: String,
 default: null
 }
}

"color: #ff0000">问题总结

•该公共topBar.vue组件对ipad不能有效适配;
•fixed定位在安卓手机上下拉刷新时,结构会跟着下拉,例如本文的自定义导航,下拉刷新的时候导航会跟着下拉然后再fixed到顶部(开发者工具上没问题,真机有问题);

以上所述是小编给大家介绍的微信小程序系列之自定义顶部导航功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

标签:
小程序自定义顶部导航,小程序自定义导航,微信小程序自定义导航

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“微信小程序系列之自定义顶部导航功能”

暂无微信小程序系列之自定义顶部导航功能的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。