精华内容
下载资源
问答
  • 一、获取view宽高度 给view设置一个id(class)名,用法和jQuery类似,用来获取指定id相关信息。 <view id="test">测试view</view> 把方法写在onReady,是为了再页面初次渲染完成后,再去获取,避免不...

    一、获取view宽高度

    给view设置一个id(class)名,用法和jQuery类似,用来获取指定id相关信息。

    <view id="test">测试view</view>
    

    把方法写在onReady,是为了再页面初次渲染完成后,再去获取,避免不准确或获取不到的情况。

    onReady: function (e) {
    	const query = wx.createSelectorQuery();
    	query.select('#test').boundingClientRect(function (res) {
    		console.log(res)
    	}).exec()
    }
    

    输出结果:
    在这里插入图片描述

    二、获取自定义组件宽高度

    获取自定义组件的相关信息,与获取view信息基本一致,只需要把const query = wx.createSelectorQuery()替换成const query = wx.createSelectorQuery().in(this)就可以了。

    const query = wx.createSelectorQuery().in(this);
    query.select('#test').boundingClientRect(function (res) {
    	console.log(res)
    }).exec()
    

    但是在实际使用的时候,却发现一个问题,这样是能获取到组件的相关信息,但是高度却和实际的有误差:
    在这里插入图片描述
    如图,获取到组件高度为603,而实际#test组件高度为160,这就有点坑了,不知道大家有没有遇到这样的情况???

    展开全文
  • 1. 自定义组件 在微信小程序的开发中,经常需要在不同的地方使用一些相同的组件,这些组件的样式,数据,以及点击事件都是相同的,所以,可以微信提供了自定义组件的方式,可以将我们经常使用的组件封装起来,可以使得开发...

    1. 自定义组件

    在微信小程序的开发中,经常需要在不同的地方使用一些相同的组件,这些组件的样式,数据,以及点击事件都是相同的,所以,可以微信提供了自定义组件的方式,可以将我们经常使用的组件封装起来,可以使得开发效率更高,让我们对于小程序的开发更加的深刻.
    自定义组件官方文档
    新建一个组件对应以下几个步骤:

    1. 新建一个专门用于存放组件的文件夹,可以命名为cmps(命名可以随意)

    2. 在cmps文件夹下,新建文件夹及组件Component(注意不是新建Page);
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPAtnVkA-1588769252736)(https://upload-images.jianshu.io/upload_images/6266734-4067be3b67e6101d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

    3. 和新建page一样,组件也有4个对应的文件,分别是js,json,wxml,wxss.
      注意:微信官方的命名一般使用的中横线隔开,例如movie-item,所以命名的时候规则尽量与官方的一致.

    2. 自定义组件的封装和使用

    以我此次学习封装的movie-item为例,将整个的item的wxml,wxss,js等代码移动到对应的movie-item文件中,此处不再赘述,其中需要注意的是一些布局的代码,有些布局,例如item的宽度,这些在内部就可以写好,在外部的代码就可以直接删除:
    image.png

    2.1 组件的使用

    在封装以后可以预先编译一下看看封装是否能达到效果,组件的使用如下:

    • 在需要使用组件的page的.json文件中,加入以下代码:
    {
      "usingComponents": {
        /* key:value   key是组件的命名,一般和原有名称相同,value是组件的路径*/
        "movie-item":"/cmps/movie-item/movie-item"
      }
    }
    
    • 在wxml中直接使用movie-item标签:
    <movie-item 
        class="item"
        wx:key="unique" 
        wx:for="{{ row.movies }}" 
        wx:for-item="movie"
        movie="{{movie}}">
    </movie-item>
    
    

    在封装以后可以编译一下看到效果:

    image.png
    所以到这里封装成功了一小半,接下来需要将数据传给每个对应的item就行;

    2.1 数据的处理:属性

    当我们在封装好一个component后,这个组件需展示外部赋值的数据,在component.js文件中,有一个对应的properties可以用来传递参数赋值:
    属性的定义如下:
    命名:{ type:类型(String,Number,Object等),value:默认值(选填)}

    Component({
      properties: {
        // 这里定义了innerText属性,属性值可以在组件使用时指定
        innerText: {
          type: String,
          value: 'default value',
        },
        movie:{
            type:Object,
            value:null
          }
      },
      data: {
        // 这里是一些组件内部数据
        someData: {}
      },
      methods: {
        // 这里是一个自定义方法
        customMethod: function(){}
      }
    })
    
    

    传递过来的movie的赋值给图片等东西以后,自定义组件的逻辑就实现了一半了,接下来就是实现点击事件等的添加;

    2.2 点击事件的添加

    例如我封装的每个movie-item,在不同的页面响应的事件应该是相同的,跳转的都是电影详情;
    事件绑定

    1. wxml文件中先绑定事件:
    <view class="item" bindtap="enterDetail"></view>
    

    在自定义的组件中,以我自定义的movie-item为例,在.js文件中,有一个methods方法:

    /**
     * 组件的方法列表
     */
    methods: {
       enterDetail:function(){
         wx.navigateTo({
           url: `/pages/detail/detail?title=${this.data.movie.title}`,
         });
       }
    }
    

    3. 页面间的数据传递

    在由movie-item跳转到电影详情detail的时候,需要将电影信息传递到detail页面,数据的传递有以下几种方式:

    3.1 存储和读取

    使用setStorage和getStorage方法,在进入页面之前通过电影名将电影信息存储起来,进入到电影页面通过电影名读取电影信息;

    3.2 通过页面跳转url后拼接参数传递

    页面跳转的url后面可以拼接参数:
    注意:

    • url后面的参数拼接只能是字符串,例如:

      url: /pages/detail/detail?title=${this.data.movie.title},

    • 不能直接将movie对象直接拼接到url后面;

    另一种做法是将movie对象转化为json字符串,然后,在detail页面中将字符串转成对象:
    JSON和对象互转用法:JSON.stringify和JSON.parse

    methods: {
            enterDetail:function(){
             // 序列化:将JSON对象转换为JSONString
             // 反序列化:将JSONString转换为JSON对象
              wx.navigateTo({
                url: `/pages/detail/detail?movie=${JSON.stringify(this.data.movie)}`,
              });
            }
     }
    
    

    在detail页面的js文件onload方法中将参数转化为movie对象:

    /**
      * 生命周期函数--监听页面加载
      */
     onLoad: function (options) {
           console.log(options);
           let movie = JSON.parse(options.movie);
           console.log(movie);
       
           wx.setNavigationBarTitle({
             title: movie.title,
           }); 
     },
    
    

    打印url,options和movie对象如下:
    image.png

    3.3 使用eventChannel双向传递数据

    在微信官方文档中链接,传递数据和监听打开页面事件响应使用了eventChannel,这是一个双向的channel, 使用起来也比较方便,所以相比较前两种方法,这种更适合页面间较大数据,对象等的传递,简单的值传递使用url拼接参数就可以实现. 以下是实现代码示例:

    movie-item.js中的代码:

    methods: {
        enterDetail:function(){
          wx.navigateTo({
            url: '/pages/detail/detail',
            success: (result) => {
              //通过eventChannel向被打开的页面传递数据
              result.eventChannel.emit('sendDataToDetail',{data:this.data.movie});
            },
    
            events: {
              // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
              acceptDataFromOpenedPage: function(data) {
                console.log(data)
              },
              someEvent: function(data) {
                console.log(data)
              }
            },
            fail: () => {},
            complete: () => {}
          });
        }
      }
    
    

    跳转页面detail.js中的代码:

    /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        const eventChannel = this.getOpenerEventChannel();
        // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('sendDataToDetail',function(data){
          console.log(data);
        });
        
        //向上一级页面返回数据
        eventChannel.emit('acceptDataFromOpenedPage',{data:'sentBackTest'});
        eventChannel.emit('someEvent', {data: 'test'});
          
      },
    
    

    打印如下:
    image.png

    还有很多传递数据的方式,比如可以在app.json中,给某个全局的对象如wx.db定义一个movie对象,每次在页面跳转前给这个对象赋值等.

    实际上只要能实现传递数据的效果的方法都可以,但是,如果后期要增加多个数据或者对象,使用url拼接的方式就会显得很复杂,使用eventchannel的方式后期增加参数没有压力,所以视开发需求情况而定;

    4. 自定义导航栏

    导航栏设置:在开发中有时候需要设置导航栏颜色,title,动画,字体颜色等,如果使用的是系统的导航栏,这些官方都提供了api可以直接设置.

    但是在实际开发过程中,有时候系统的导航栏很大可能不能满足我们开发的需求;
    image.png

    比如:在页面多次跳转以后,需要在导航栏上加上一个可以返回首页的按钮,这种情况下系统导航栏没有给我们提供api,也没有对应的组件,这时候就需要我们自定义导航栏来实现;

    4.1 自定义导航栏需要实现的功能

    • 可以展示系统导航栏没有的子控件,并且可以控制在不同页面展示和隐藏;
    • 适配不同机型问题:
      • 在有刘海的设备上:例如iPhone X,华为等,状态栏高度不一样,需要动态设定;
      • android设备navBar的高度是48,iOS设备navBar的高度是44,也需要动态设定;
    • 提供api给外界设置title,color,font等样式.

    自定义导航栏方式:

    1. 在app.json中设置navigationBarStyle为custom,这样每个界面的导航栏就消失了,然后需要在每个界面自己添加自定义的导航栏
      系统导航栏

    全局配置: 未配置默认样式是default, 配置样式custom(自定义)以后,如图所示,搜索框的起始位置是从0开始的,在未配置以前是从导航栏的底部开始的.

    "window": {
        "navigationStyle":"custom"
      },
    

    系统导航栏隐藏后

    4.2 获取状态栏高度

    获取系统信息

    可以在app.js中,通过wx.getSystemInfoSync()方法获取设备的信息
    image.png

    const info = wx.getSystemInfoSync();
        wx.db.statusBarHeight = info.statusBarHeight;
        if(info.system =='android'){
          wx.db.navBarHeight = 48;
        }else{
          wx.db.navBarHeight = 44;
        }
    

    4.3 导航栏的封装和实现

    和movie-item一样,创建一个nav-bar组件,然后对应子控件,属性等,以下是具体代码.

    wxml中的代码如下:

    • 通过设置style来动态设置statusBar和navBar的高度;
    • 通过wx:if判断属性值控制back和home是否展示
    <view class="container">
      <view class="status-bar" style="{{statusBarStyle}}">    
      </view>
      <view class="nav-bar" style="{{navBarStyle}}">
        {{title}}
        <view class="icons">
        <image bindtap="backClick" wx:if="{{ back == 'true' }}" class="back" src="/assets/imgs/nav_back.png"></image>
        <image bindtap="homeClick" wx:if="{{ home == 'true' }}" class="home" src="/assets/imgs/nav_home.png"></image>
        </view>
      </view>  
    </view>
    

    wxss中的代码如下:

    • back和home居左,使用了相对和绝对布局;
    • statusBar和navBar的高度通过wxml中的style设定;
    .nav-bar{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    
    .icons{
        position:absolute;
        left: 25rpx;
        display: flex;
        align-items: center;
    }
    
    .home{
        height: 36rpx;
        width: 36rpx;
    }
    
    .back{
        height: 36rpx;
        width: 36rpx;
        margin-right: 20rpx;
    }
    

    js中的代码如下:

    • 在属性列表中的属性也可以通过this.data.xxx来获取;
    • 返回上一级页面和home,可以设置wx.navgateBack()中的delta值来判断,(微信页面的层级最多10层,所以返回home,可以设置一个很大的数字);
    • 在具体的页面想要监听返回和返回首页,可以使用this.triggerEvent来实现;
    • 动态设置状态栏和导航栏的高度,在组件的声明周期lifetimes中,在组件即将被加载时设置,然后使用this.setData()方法刷新;
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        title:{
          type:String,
          value:"豆瓣评分"
        },
        back:{
          type:String,
          value:"true"
        },
        home:{
          type:String,
          value:"false"
        },
        statusBarColor:{
          type:String,
          value:'#fff'
        },
        navBarColor:{
          type:String,
          value:'#fff'
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        statusBarStyle:'',
        navBarStyle:''
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        backClick:function(){
          this.triggerEvent('backTap');
           wx.navigateBack({
             delta: 1
           }); 
        },
        homeClick:function(){
          this.triggerEvent('homeTap');
          wx.navigateBack({
            delta: 999
          });
        }
      },
    
      lifetimes: {
        attached: function() {
          const statusBarStyle=`height:${wx.db.statusBarHeight}px;background-color:${this.data.statusBarColor}`;
          const navBarStyle=`height:${wx.db.navBarHeight}px;background-color:${this.data.navBarColor}`;
          this.setData({statusBarStyle,navBarStyle});
        },
        detached: function() {
          // 在组件实例被从页面节点树移除时执行
        },
      },
    })
    
    

    不同页面样式的导航栏如下:

    首页-没有back没有home

    list-没有home

    detail-back和home都有

    学习完自定义组件以后,可以更好的了解微信小程序开发的流程,能够更好的锻炼自己.
    原文链接

    展开全文
  • uni-app 子组件动态获取高度

    千次阅读 2020-12-28 11:34:34
    页面内可以使用onReady,子组件没有页面的onReady生命周期,即使写上也不生效,使用mounted代替。 可以参考:关于uniapp子组件的问题 示例: uni.getSystemInfo 获取系统信息。 uni.createSelectorQuery 获取DOM相关...

    前言

    页面内可以使用onReady,子组件没有页面的onReady生命周期,即使写上也不生效,使用mounted代替。

    可以参考:关于uniapp子组件的问题

    示例:

    uni.getSystemInfo 获取系统信息。

    uni.createSelectorQuery 获取DOM相关数据。

    <template>
      <view :style="{ height: surpluslHeight }"></view>
    </template>
    
    <script>
    export default {
      data() {
        return {
          surpluslHeight: 0
        };
      },
      mounted() {
        // 获取屏幕高度及比例
        uni.getSystemInfo({
          success: (res) => {
            // 获取屏幕高度
            let windowHeight = res.windowHeight;
            // 获取其他容器高度
            let dom = uni.createSelectorQuery().select(".nav");
            dom
              .fields({ size: true }, (res2) => {
                if (!res2) {
                  return;
                }
                // 计算得出剩余区域的高度
                this.surpluslHeight = windowHeight - res2.height + "px";
           	  })
              .exec();
          },
        });
      },
    };
    </script>
    

    其他问题:

    子组件内,fields回调函数返回null,使用 in(this) 可以获取,如下示例。

    uni.createSelectorQuery().in(this).select("#id");

    参考官方文档:查询节点信息的对象

    如果本篇文章对你有帮助的话,很高兴能够帮助上你。

    当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

    展开全文
  • 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.使用的时候直接从缓存中获取值

     

    展开全文
  • 获取wpf自定义组件的宽度和高度的时候,如果直接在InitializeComponent();后面用this.Width,和this.ActualWidth会得到Nan和0,因为组件还没有被计算大小。 要获得组件的宽度和高度可以添加Loaded事件的响应函数,...
  • 小程序学习(11):在自定义组件中,获取view高度获取canvas对象 2019年9月25日 1.获取view高度 首先,在wxml中的代码都是一样的 <view id="redd" class="red" /> 这里的css是 .red{ width: 100%; height...
  • <view class="header" :style="'height:'+height+'px'"> <icon class="iconfont icon-xiangyou"></icon> <text>返回</text> </view>``` <... on
  • NULL 博文链接:https://l540151663.iteye.com/blog/2005544
  • vue 获取组件高度

    千次阅读 2020-09-12 09:10:59
    // 获取高度值 (内容高+padding+边框) let height= this.$refs.element.offsetHeight; //100 // 获取元素样式值 (存在单位) let height = window.getComputedStyle(this.$refs.element).height; // 100px // ...
  • uni-ap自动获取状态栏高度属性 uni.getSystemInfoSync().statusBarHeight 组件定义: <template> <view> <view class="mp-header"> <view class="sys-head" :style="{ height: ...
  • 有时我们在mouted方法中想通过id读取到一个dom元素,虽然官方并不推荐这种方法来...所以用document.getelementId 是无法获取到该元素的解决方法在vue文档中 关于的自定义指示器中有这么一段话通过自定义指示器的ins...
  • 效果图: 【iphone5 】下tabBar的高度是 64 【iPhone XR】下tabBar的高度是 82 如何获取到不同手机上...(1)在自定义组件或包含自定义组件的页面中,应使用this.createSelectorQuery()来代替,否则就使用 w...
  • 微信小程序table表格自定义组件实现

    千次阅读 多人点赞 2020-10-22 17:16:22
    自定义样式配置项 columns 属性 类型 默认值 必填 说明 label String 是 表格标题 prop Array 是 表格中需要展示的数据列 onclick Boolean false 否 为某一列设置点击事件,若同时为多列设置了点击...
  • uniapp中获取某个组件高度

    千次阅读 2020-12-30 16:07:33
    // 获取某个元素 info.boundingClientRect(function(data) { //data - 各种参数 console.log("获取高度",data.height) // 获取元素宽度 that.heightHome = data.height; }).exec() } }); }
  • HarmonyOS 提供了一套复杂且强大的 Java UI 框架,其中 Component 提供内容显示,是界面中所有组件的基类。ComponentContainer 作为容器容纳 Component 或 ComponentContainer 对象,并对它们进行布局。 Java UI ...
  • 使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度。 2.2 获取右上角胶囊位置信息 使用wx.getMenuButtonBoundingClientRect()方法获取右上角胶囊位置信息。 关键问题在于自定义胶囊的上、下和左边距。 ...
  • 自定义组件获取必须用SelectorQuery.in() Component({ lifetimes: { ready() { const query = wx.createSelectorQuery().in(this) const num = Math.ceil(this.data.picList.length / LINE_LENGT...
  • 所以现在我要重头写自定义组件,我认为我现在写不出来有以下几个原因 1.对Android系统提供的一些方法接触的还是不够深刻。 2.自己写的少,没有什么思路。 3.自己写的少,没有什么思路。重要的东西要说两遍。现在...
  • 微信小程序map自定义组件实现

    千次阅读 2020-10-16 11:24:59
    效果     ... 图片  ...子组件WXML <map id="map" setting="{{setting}}" markers="{{markers}}" bindmarkertap="markerTap" style="width: 100%; height: 100%;"><
  • 前言:在不同的页面重复使用自定义组件;自定义组件可以理解一个页面,在不同页面显示出来,一个自定义的组件也是由json、wxml、wxss、js 4个文件组成的,下面点击tabar页面切换显示自定义顶部为示例。 官网:...
  • 声明:本文简述Android应用开发中,自定义组件的实现方式,参考和查阅部分资料,整理而成。 参考资料: Android 手把手教您自定义ViewGroup:http://blog.csdn.net/lmj623565791/article/details/38339817 Android...
  • 自定义组件的简单使用—View1、 控件是怎么来的? 每一个控件都是使用绘图的方式绘制出来的2、开发自定义组件的几种方法 A、从0开始开发自定义组件,从View或ViewGroup类继承,难度最大 B、从已有组件继承,比如...
  • 由于项目中需求,需要获取元素的宽高。在查阅方法,可以选择通过指令的方式来获取。网上的方法一般是通过CSSStyleDeclaration来获取元素的宽度,尝试之后获取都是空的。 经不停的测试之后,可以采用以下方法来获取:...
  • 在偶然,开发一个日历小程序时,在使用了ColorUI的框架下,布局上日历放在小程序标题,因为ColorUI的fixed无法精确获取日历(可展开与隐藏)高度问题。因此采用了双层嵌套组件。实现图如下: 下面看wxml代码结构...
  • Custom Components「自定义组件」翻译

    千次阅读 2017-07-10 10:52:10
    前言由于打算开始好好学习自定义 View 了,就打算边学边写点文章记录自己的学习过程。不知道从哪里下手,干脆看看官方的文档吧,于是就想着翻译出来了。不过我是个英文菜鸡,翻译什么的更不要提了。翻译的很差劲,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,157
精华内容 18,862
关键字:

自定义组件动态获取高度