小程序中使用components方法selectComponent遇到的坑 返回为null

前言:哎呦气死了,小程序等着发布审核得时候 发现了一个bug,selectComponent获取不到组件了,返回值一直为null

原因居然是因为 wx:if  , 代码如下,无论if是true还是false  都获取不到组件,去掉wx:if 就可以了  记录一下  希望大家可以避开,网上百度了一下,很少这个问题得记录。

<view class="address" hover-class="none" hover-stop-propagation="false" wx:if="{{detailData.status == ‘ONLINE‘}}">
  <span class="van-row-label">送至</span>
   <span class="address-info" bindtap="selectAddress">{{addressValue === ‘‘ ? ‘请选择收货地址+‘ : addressValue}}</span>
  <selectAddress id="selectAddress-modal" bind:getSelectedAddress="getSelectedAddress"></selectAddress>
</view>

那就顺便记录一下,如何获取组件吧。

  1. json 文件中引入了该组件
{
  "usingComponents": {
  "selectAddress":"../../../components/selectAddress/selectAddress"
  }
}
  1. 父组件 wxml 文件中使用了这个组件并且设置了一个 id 或者是 class 类样式   (我下面都是用id  class也是一样的和样式命名方式一样)
  <selectAddress id="selectAddress-modal"></selectAddress>
  1. 父组件 js 文件中传递了正确的选择器获取子组件对象

  

    Page({
        onReady(){  //onReady或者 onLoad里面先取值都是可以的
            // (大坑)切记下面参数不能传递标签选择器(selectAddress),不然返回的同样是 null
           this.selectAddressModal = this.selectComponent("#selectAddress-modal");
        }
    })

原文地址:https://www.cnblogs.com/wenrain/p/11389392.html

时间: 2024-07-31 03:36:37

小程序中使用components方法selectComponent遇到的坑 返回为null的相关文章

微信小程序中的自定义组件 以及 相关的坑

Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件,因此,我们在 components 组件中新建一个 home 文件夹来存放我们的弹窗组件,在 home 下右击新建 Component 并命名为 home 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示: Step2 组

微信小程序中weui使用方法

1.git下载,找到dist文件: https://github.com/wechat-miniprogram/weui-miniprogram 2.把dist文件中的style复制到根目录 app.wxss引入这个文件 @import '/style/weui.wxss'; 3.dist文件中example目录复制到根文件,(里面是设置相关的代码,直接复制出来使用) 4.app.json把需要引用的文件引到里面 "pages": [ //比如使用button,把他引入 "e

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

WePY 在手机充值小程序中的应用与实践

wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序. 以及一些来自网上的 wepyjs 的相关资源: demo源码: one,图书管理系统 组件:图表控件 因此我也将手机充值小程序在开发过程中 wepyjs 的应用心得分享出来,可以参照对比与传统小程序开发上的差异. 说明:本文不涉及到 wepyjs 的使用与说明,如果需要请参看我的另一篇文章 "打造小程序组件化开发框架" 或直接参看wepyjs 项

微信小程序中无刷新修改

1.点击事件无刷新修改 原理:onload事件中是把这个分类和品牌的列表全部拿出来,拼接成数组的格式,在小程序中遍历的时候就要把小标(index)给绑定到左侧的品牌上,然后js中获取index的值,就可以动态的修改数组中的下标,右侧的品牌就可以动态的修改了 下面还有另一个方法,到时候会分享

蓝牙在小程序中的应用

1. 背景介绍 蓝牙是爱立信公司创立的一种无线技术标准,为短距离的硬件设备提供低成本的通信规范.蓝牙规范由蓝牙技术联盟(Bluetooth Special Interest Group,简称SIG)管理,在计算机,手机,传真机,耳机,汽车,家用电器等等很多场景广泛使用.蓝牙具有以下一些特点: (1) 免费使用:蓝牙技术免费使用,并且使用的工作频段在2.4GHz的工科医(ISM)频段,无需申请许可证. (2) 功耗低:BLE4.0包含了一个低功耗标准(Bluetooth Low Energy),可

微信小程序中的 hover-class

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time 这三个属性. 使用方法: <view hover-class="bg_red">这是

小程序开发——统一请求方法

一般我们习惯将请求接口的方法统一起来,变成公共方法 但是在小程序中,似乎遇到了一些问题,官方给的示例是: this.setData({ name: 'MINA' }) this局限了请求的地方,似乎只能在每个业务页面内,setData方法的参数不够配置化 以下是我参考一些资料之后得到的解决方案 util.js var apiHost = "....."; //url添加最后的相对路径即可 function getRequest(url, that, targetName) { wx.r

微信小程序中使用ECharts 异步加载数据 实现图表

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas