精华内容
下载资源
问答
  • 1.tabbar组件ready方法中 ready() { // 缓存tabber栏的高度 const query = wx.createSelectorQuery().in(this) query.select('.tabbar').boundingClientRect((rect) => { // console.log(rect.height) ...

    1.tabbar组件ready方法中

     ready() {
    	// 缓存tabber栏的高度
    	const query = wx.createSelectorQuery().in(this)
    	query.select('.tabbar').boundingClientRect((rect) => {
    	    // console.log(rect.height)
    	    wx.setStorageSync('tabbberHeight', rect.height)
    	}).exec()
      },

    2.tabar的html中需要加上一个类名

    3.使用的时候直接从缓存中获取值

     

    展开全文
  • 小程序自定义头部组件

    千次阅读 2020-06-30 17:47:20
    在app.js中动态获取顶部高度 /* eslint-disable no-unused-vars */ import { wxp, http } from './utils/index' import { store } from './store/index' import log from './utils/log' App({ onLaunch(options) {...

    在这里插入图片描述

    在app.js中动态获取顶部高度

    /* eslint-disable no-unused-vars */
    import { wxp, http } from './utils/index'
    import { store } from './store/index'
    import log from './utils/log'
    
    App({
      onLaunch(options) {
        // 导航栏总高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度
        // iOS 胶囊按钮与状态栏之间距离为:4px, Android 为 8px,胶囊的高度为32,胶囊的宽度,android大部分96,ios为88
        //获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
        // wxp.getSystemInfo().then(systemInfo => {
        //   store.setBarHeight(systemInfo.statusBarHeight)
        // })
        let systemInfo = wx.getSystemInfoSync()
        let rect = wx.getMenuButtonBoundingClientRect()
        let gap
        let barHeight
        if (rect) {
          //导航栏高度
          gap = rect.top - systemInfo.statusBarHeight //动态计算每台手机状态栏到胶囊按钮间距=胶囊上边距手机顶部的距离-时间状态栏高度
          barHeight = 2 * gap + rect.height
        } else {
          if (systemInfo.platform === 'android') {
            barHeight = 48
          } else {
            barHeight = 40
          }
        }
        store.setNavHeight({
          statusHeight: systemInfo.statusBarHeight,  //时间栏
          barHeight: barHeight, //标题栏
        })
    	//获取高度结束
        http.get('/common/mini_set').then(({ data }) => {
          store.setConfig(data)
        })
        //一进来非登录页,去掉接口获取个人信息
        if (!options.path.includes('login')) {
          wxp.login().then(async ({ code }) => {
            try {
              const { data } = await http.post('/auth/login', {
                code,
                source: 2,
              })
              store.setUserInfo(data.userInfo)
              store.setMemberInfo(data.memberInfo)
              wx.setStorageSync('token', data.userInfo.token)
            } catch (error) {}
          })
        }
      },
      onError(error) {
        log.error(error)
      },
    })
    

    全局组件navbar

    <config>
      {
        "component":true,
        "usingComponents": {
          "van-sticky": "@vant/weapp/sticky/index"
        }
      }
    </config>
    
    <template lang="wxml">
      <van-sticky>
        <view class="navbar-box w100" style="height:{{navHeight.statusHeight + navHeight.barHeight }}px;background:{{bg}};">
          <view class="navbar w100 fixed" style="height:{{navHeight.statusHeight + navHeight.barHeight}}px;padding-top:{{navHeight.statusHeight}}px">
            <view class="title white size-32" style="line-height: {{navHeight.barHeight}}px;">{{title}}</view>
          </view>
        </view>
      </van-sticky>
    </template>
    
    <script>
    import { store } from '../store/index'
    Component({
      options: {
        addGlobalClass: true,
      },
      properties: {
        title: String,
        bg: String,
      },
      data: {
        navHeight: {},
      },
      lifetimes: {
        attached() {
          this.setData({
            navHeight: store.navHeight,
          })
        },
      },
      methods: {},
    })
    </script>
    
    <style>
    .navbar {
      top: 0rpx;
      left: 0rpx;
      right: 0rpx;
    }
    .title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    </style>
    
    

    在首页中使用

    //json
    "usingComponents": {
       "navbar":"../components/navbar"
    },
    "navigationStyle":"custom"
    
    //html
    <!-- navbar -->
    <navbar title="首页" bg="{{home_diy[theme-1].bg}}"></navbar>
    

    store.js

    import { observable, action } from 'mobx-miniprogram'
    import { http } from '../utils/index'
    
    export const store = observable({
      userInfo: wx.getStorageSync('userInfo') || {},
      memberInfo: wx.getStorageSync('memberInfo') || {},
      addressList: wx.getStorageSync('addressList') || [],
      config: {},
      navHeight: {}, //自定义顶部
    
      get isvip() {
        return Boolean(this.memberInfo.status && this.memberInfo.status == 1)
      },
      get isagent() {
        return Boolean(this.userInfo.agent == 1)
      },
      get iszhubo() {
        return this.userInfo.anchor_status //0-未申请 1-审核中 2-已通过 3-已拒绝
      },
      // 在申请完,更新主播状态
      updateIszhubo: action(function (status) {
        this.userInfo.anchor_status = status
      }),
      // actions
      // user's
      fetchUserInfo: action(function () {
        return http.get('/common/userInfo').then(({ data }) => {
          this.setUserInfo(data.userInfo)
          this.setMemberInfo(data.memberInfo)
        })
      }),
      setUserInfo: action(function (userInfo) {
        let obj = Object.assign({}, this.userInfo, userInfo)
        this.userInfo = obj
        wx.setStorage({
          key: 'userInfo',
          data: obj,
        })
      }),
      setMemberInfo: action(function (memberInfo) {
        let obj = Object.assign({}, this.memberInfo, memberInfo)
        this.memberInfo = obj
        wx.setStorage({
          key: 'memberInfo',
          data: obj,
        })
      }),
    
      // user's
      fetchAddressList: action(function () {
        return http.get('/common/address_index').then(({ data }) => {
          this.addressList = data
          wx.setStorage({
            key: 'addressList',
            data: data,
          })
        })
      }),
      // config's
      setConfig: action(function (config) {
        this.config = config
        wx.setStorage({
          key: 'config',
          data: config,
        })
      }),
      // 全局状态栏高度
      setNavHeight: action(function (height) {
        this.navHeight = height
        wx.setStorage({
          key: 'navHeight',
          data: height,
        })
      }),
    })
    
    
    展开全文
  • 主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx loading 导航栏是一个组件,自定义组件通过 properties 获得 prop 参数的,组件还需要维护 ...

    记一次小程序自定义导航栏及加载动画的解决方案

    主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop

    ip6

    ipx

    loading

    导航栏是一个组件,自定义组件通过 properties 获得 prop 参数的,组件还需要维护 statusBarHeight,titleBarHeight 和 navigatorHeight(实际没用到) 这三个 data

    通过在小程序 ready 生命周期内调用 setBarHeight 来动态获取这三个 data 变量

    Component({
        properties: {
            title: {
                type: String,
                default: 'default title'
            },
            ifShowBtn: {
                type: Boolean,
                default: true
            }
        },
        data: {
            statusBarHeight: 0,
            titleBarHeight: 0,
            navigatorHeight: 0
        },
        ready: function () {
            this.setBarHeight()
        },
    复制代码

    组件还有三个方法,这三个方法分别是:设置状态栏和标题栏高度的 setBarHeight、动态获取状态栏和标题栏高度的 getBarHeight,以及判断是否为 IOS 系统。

    因为判断是否为 IOS 系统才能够设置 titleBarHeight,iPhone 或 iPad 的这个值为 44,安卓的统一设置为 48 即可

    methods: {
            // 设置状态栏和标题栏高度
            setBarHeight: function () {
                this.isIOS().then(this.getBarHeight).then(res => {
                    this.setData({
                        statusBarHeight: res.statusBarHeight,
                        titleBarHeight: res.titleBarHeight,
                        navigatorHeight: res.navigatorHeight
                    })
                })
            },
            // 动态获取状态栏高度和标题栏高度
            getBarHeight: function (isIOS) {
                return new Promise((resolve, reject) => {
                    wx.getSystemInfo.call(this, {
                        success: res => {
                            let statusBarHeight = res.statusBarHeight
                            let titleBarHeight = isIOS ? 44 : 48
                            resolve({ statusBarHeight, titleBarHeight, navigatorHeight: statusBarHeight + titleBarHeight })
                        },
                        failure: res => {
                            reject('error getting systeminfo')
                        }
                    })
                })
            },
            // 判断是否为 IOS 系统
            isIOS: function () {
                return new Promise((resolve, reject) => {
                    wx.getSystemInfo.call(this, {
                        success: res => {
                            if (res.model.indexOf('iPhone') > -1 || res.system.indexOf('iOS') > -1) {
                                resolve(true)
                            } else {
                                resolve(false)
                            }
                        },
                        failure: res => {
                            reject('error getting systeminfo')
                        }
                    })
                })
            }
    复制代码

    另外,在获得这些变量之后可以存入到 app 的 globalData 对象中,每次只需要从这个对象获取变量即可

    然后编写 wxml:

    <view style="height: {{titleBarHeight}}px; padding-top: {{statusBarHeight}}px;">
        <view class="header" style="height: {{titleBarHeight}}px; padding-top: {{statusBarHeight}}px;">
            <view wx:if="{{ifShowBtn}}" class="header-btn">
                <view class="btn-item">B</view>
                <view class="btn-item">H</view>
            </view>
            <view class="header-title">{{title}}</view>
        </view>
        <view class="loading">loading...</view>
    </view>
    复制代码

    自定义导航栏的高度就是 titleBarHeight,paddingTop 的值就是 statusBarHeight

    因为自定义导航栏是 fixed 元素,因此这个 class 为 header 的 view 元素设置样式如下:

    .header {
        display: flex;
        align-items: center;
        position: fixed; /* fixed 因此在 wxml 中还需要再次设置一遍 height 和 paddingTop */
        top: 0;
        background: #fff;
        width: 100%;
        z-index: 9999;
    }
    复制代码

    header-title 是一个绝对定位的元素,需要设置样式,将其居中:

    .header-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }
    复制代码

    最后还需要解决 pullDownRefresh 的加载动画问题,如果没有修复这个问题会出现一个大的空白

    首先需要设置 app.json

    • backgroundTextStyle 为 light
    • navigationBarTextStyle 为 black
    {
      "pages": [
        "pages/index/index"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationStyle": "custom",
        "enablePullDownRefresh": true,
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTextStyle": "black"
      }
    }
    复制代码

    然后增加组件 wxml 中 class 为 loading 的元素这个就是自定义加载动画

    然后增加样式:

    .loading {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    复制代码

    flex 布局并居中即可

    最后设置 navigator.json 将模块定义为组件

    {
        "component": true
    }
    复制代码

    在页面中使用:

    修改配置文件:

    {
      "usingComponents": {
        "navigator": "../../components/navigator/navigator"
      }
    }
    复制代码

    修改 wxml 文件:

    <navigator ifShowBtn="{{true}}" title="the navigator"></navigator>
    <view class="container">
    <!-- ...... -->
    </view>
    复制代码

    参考:

    转载于:https://juejin.im/post/5c91fc6bf265da60f00ec9f8

    展开全文
  • 3、自定义组件的默认配置信息(此步骤可选,该方法可以在任意时间调用) 页面的js中通过ymPrompt.setDefaultCfg(cfg)方法修改组件部分或全部的默认属性。 如:ymPrompt.setDefaultCfg({maskAlpha:0.2,...
  • 只匹配初始时默认节点,不会在你操作后动态改变默认节点 17 placeholder 设置搜索框提示语 String 输入关键词进行筛选 - 18 defaultTransfer 是否自动穿梭一次默认选中defaultCheckedKeys的节点 Boolean false ...
  • 能从本项目学习到的知识点:纯粹的ES6语法自定义UI组件Titlebar,处理居中等排版问题自适应高度的EditText获取网络图片并根据其大小自动缩放排版Navigator导航的使用列表的更新技巧动态排版支持Gif日期选择控件...



    好久没更新了,灌一篇水文干码。

    GitHub源码地址
    应用宝下载地址

    这是一个完整的App.
    能从本项目学习到的知识点:

    • 纯粹的ES6语法
    • 自定义UI组件
      • Titlebar,处理居中等排版问题
      • 自适应高度的EditText
      • 获取网络图片并根据其大小自动缩放排版
    • Navigator导航的使用
    • 列表的更新技巧
    • 动态排版
    • 支持Gif
    • 日期选择控件
    • Cheerio 解析HTML
    • 网络请求Get && Post
    • RN与Android的互相调用

    效果图:

    preview01preview02preview03


    About Sodino

    展开全文
  • Visual C++编程技巧精选500例.pdf

    热门讨论 2012-09-01 15:01:50
    043 如何获取标题栏高度? 044 如何设置标题栏文字? 045 如何获取标题栏文字颜色? 046 如何设置标题栏文字颜色? 047 如何在文档类中设置标题栏文字? 048 如何防止在标题栏上显示文档名? 049 如何禁止标题栏的最小化...
  • 11.6 如何自定义组件 348 11.6.1 组件的需求 348 11.6.2 按生命周期来编写组件 348 11.6.3 重构 349 11.6.4 编写文档 350 11.7 小结 350 第12章 Ext JS面板,信息提示更人性化 351 12.1 浮动层(Layer) 351...
  • getStatusBarHeight : 不传Context获取状态栏高度 isStatusBarExists : 判断状态栏是否存在 getActionBarHeight : 获取ActionBar高度 showNotificationBar : 显示通知栏 hideNotificationBar : 隐藏通知栏 Base...
  • 阅读下一个文件,以获取有关使用库组件的完整说明: 。\ Hlp \ ENG \“ EhLib-用户指南.doc” 在文件中阅读有关EhLib for Lazarus的信息-Lazarus <*> \ readme.txt 总览 -------- 该库包含几个组件和对象。 ...
  • 动态的管理组件,所以给每个组件添加几个生命周期状态:加载、卸载和降维。为此我们给每个组件增加一个ApplicationLike类,里面定义了onCreate和onStop两个生命周期函数。 看到网上有个方案说:主项目负责加载组件...
  • 实例337 表头与列的高度设置 实例338 调整表格各列的宽度 实例339 设置表格的选择模式 实例340 为表头增添提示信息 实例341 单元格的粗粒度排序 实例342 实现表格的查找功能 14.4 表格的高级应用 实例343 在...
  • 实例337 表头与列的高度设置 实例338 调整表格各列的宽度 实例339 设置表格的选择模式 实例340 为表头增添提示信息 实例341 单元格的粗粒度排序 实例342 实现表格的查找功能 14.4 表格的高级应用 实例343 在...
  • C#编程经验技巧宝典

    热门讨论 2008-06-01 08:59:33
    106 <br>0175 如何检索指定条件数组中的元素 107 <br>0176 如何动态改变数组长度 108 <br>0177 如何反转数组中元素的顺序 108 <br>0178 如何排序数组中的元素的顺序 109 <br>0179 如何创建...
  • 实例252 自定义最大化、最小化和关闭按钮 321 实例253 禁止改变窗体的大小 323 11.3 设置窗体的标题栏 324 实例254 指定窗体标题栏图标 324 实例255 拖动没有标题栏的窗体 325 实例256 取消窗体标题栏与边框 326 ...
  • 实例252 自定义最大化、最小化和关闭按钮 321 实例253 禁止改变窗体的大小 323 11.3 设置窗体的标题栏 324 实例254 指定窗体标题栏图标 324 实例255 拖动没有标题栏的窗体 325 实例256 取消窗体标题栏与边框 326 ...
  • FYCMS是一款完全开源的程序,都毫无保留的完全开放源代码,用户不需额外安装其他DLL组件,其最大的特点是易用。 系统自带三大模型,系统模型,注册模型,表单模型,让你无顾虑制作属于自己的特色网站。 国内目前...
  • 作为自定义组件引入,注意目录为第一步引入的代码所在目录 "usingComponents":{ "painter":"/components/painter/painter" } 组件接收 palette 字段作为画图数据的数据源, 图案数据以 json 形式存在,推荐使用...
  • FYCMS是一款完全开源的程序,都毫无保留的完全开放源代码,用户不需额外安装其他DLL组件,其最大的特点是易用。   系统自带三大模型,系统模型,注册模型,表单模型,让你无顾虑制作属于自己的特色网站。 国内...
  • 实例001 获取鼠标双击时间间隔 实例002 获取光标闪烁的频率 实例003 获取鼠标键数 实例004 显示鼠标的等待光标 实例005 获得鼠标在窗体上的位置 实例006 记录鼠标行为 实例007 通过截取系统消息判断鼠标的单击键 1.2...
  • 《易精经》前三章 PDF

    2011-03-24 12:20:04
    <动态组件> <文件拖放> <读取dll中的资源-扑克牌图片> <读DOS程序执行结果> <自制皮肤> <远程线程> <给打开文件对话框加预览窗口> 。。。。。 打印机。枚举。。。 文件格式编程 读位图文件格式 取...
  • 封装了百度地图,视图切换,运动轨迹,设备点位,鼠标按下获取经纬度等。 支持图片地图,设备按钮可以在图片地图上自由拖动自动保存位置信息。 在百度地图和图片地图上,双击视频可以预览摄像头实时视频。 堆栈窗体...
  • 64、JS自动检测IFRAME内容高度并自动设置为IFRAME高度 338 65、JS MOVETO设置屏幕滚动到最底端或者最顶端 339 66、JS OBJECT方式设置浏览器最大化与最小化 339 67、边框标签FIELDSET 339 68、按钮与A标签的DISABLED...
  • 1 更新添加子栏目无法获取栏目名称 2 更新UTF-8编码 验证码出现的问题   首先感谢您选择ACT网站管理系统。 ACTCMS是一款具有强大的功能的基于ASP语言的开源内容管理软件,有UTF-8和GB2312两个编码版本,支持...
  • ACTCMS是一款完全开源的程序,都毫无保留的完全开放源代码,用户不需额外安装其他DLL组件,其最大的特点是易用,ACTCMS.搭积木式的网站建设.系统自带三大模型,系统模型,注册模型.表单模型.让你无顾虑制作属于自己的...
  • ACTCMS是一款完全开源的程序,都毫无保留的完全开放源代码,用户不需额外安装其他DLL组件,其最大的特点是易用,ACTCMS.搭积木式的网站建设.系统自带三大模型,系统模型,注册模型.表单模型.让你无顾虑制作属于自己的...
  • 11.2 Prototype自定义对象和类 实例302 在HTML元素中增加CSS样式 实例303 利用Enumerable对象在页面中显示数组元素 实例304 使用Field对象操作表单域 实例305 通过Form对象实现让表单元素失效 实例306 使用Form....
  • Java开发实战1200例.第2卷.part3

    热门讨论 2013-05-08 22:46:34
    实例264 设置图表高度 425 实例265 设置图表位置 427 9.5 图表的综合应用 429 实例266 利用饼图分析不同编程语言的市场 占有率 429 实例267 利用柱形图显示某Ajax网站不同框架的 年下载量 431 实例268 利用折线图...
  • Java开发实战1200例.第2卷.part2

    热门讨论 2013-05-08 22:45:35
    实例264 设置图表高度 425 实例265 设置图表位置 427 9.5 图表的综合应用 429 实例266 利用饼图分析不同编程语言的市场 占有率 429 实例267 利用柱形图显示某Ajax网站不同框架的 年下载量 431 实例268 利用折线图...
  • Java开发实战1200例.第2卷.part1

    热门讨论 2013-05-08 22:44:13
    实例264 设置图表高度 425 实例265 设置图表位置 427 9.5 图表的综合应用 429 实例266 利用饼图分析不同编程语言的市场 占有率 429 实例267 利用柱形图显示某Ajax网站不同框架的 年下载量 431 实例268 利用折线图...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

自定义组件动态获取高度