微信小程序wx_calendar组件,在 bindload 事件后执行 selectComponent(‘#calendar‘) 操作。


前言

想必各位大佬对wx_calendar组件也有一定的了解,本文主要讲述一下【在 bindload 事件后执行 selectComponent(’#calendar’) 操作。】的一些骚操作

一、使用场景

我们用日历组件作为一个简易的日期选择组件。例如,点击了某一天以后,就将这一天作为项目的开始日期。
那么,我们进入日历页面时,就会想设定好默认跳转到开始日期,那应该怎么做呢?
在wx_calendar的文档中,我们看到作者不希望我们在加载的时候就跳转到某一天,而是默认为今天,所以做起来会比较麻烦。

二、使用步骤

设置虚假的load函数

在wxml中,我们会配置这么一段代码

<calendar id="calendar" binddatechange="selectDate" bindload="loadDate"/>

bindload会在程序加载的时候进行执行。但是,bindload里面的函数并不一定在onReady函数之前执行完,有可能在onReady函数之后才执行完。那么,如果我们使用selectComponent(’#calendar’) 操作就会报错或者不被执行。

那么我们应该怎么做呢?
我们可以在js里面配置一段代码

  loadDate(e) {
    this.setDate(e)
  },
  setDate(e){
  	//真正的初始化函数
  	//可以在这里跳转到开始日期
  }

通过这个操作,我们就可以满足,在bindload事件后,才执行selectComponent(’#calendar’)操作。

三、总结

上面这个方法也只是我投机取巧的一个小操作,正常情况应该不会报错。如果报错了,也希望开发大大能够就此场景进行补充开发,麻烦了~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序的swiper组件默认是根据图片的高度来设置swiper的高度的,所以如果要实现swiper高度自适应的效果,可以采用以下几种方式: 1. 使用image组件获取图片的高度:在swiper-item中使用image组件来展示图片,并设置mode为aspectFill,然后通过image组件bindload事件获取到图片加载后的高度,并将该高度动态赋值给swiper组件的高度属性。例如: ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image> </swiper-item> </block> </swiper> ``` ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, getImageHeight: function(e) { const { index, height } = e.currentTarget.dataset; this.setData({ swiperHeight: height }); } }) ``` 2. 使用wx.createSelectorQuery获取图片高度:在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度,并将该高度动态赋值给swiper组件的高度属性。例如: ```javascript Page({ data: { swiperHeight: 0, current: 0, imageList: ['image1.png', 'image2.png', 'image3.png'], }, onLoad: function() { const query = wx.createSelectorQuery(); query.select('.swiper-item-image').boundingClientRect(res => { this.setData({ swiperHeight: res.height }); }).exec(); } }) ``` ```html <swiper style="height:{{swiperHeight}}px;" current="{{current}}"> <block wx:for="{{imageList}}" wx:key="*this"> <swiper-item> <image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 以上两种方式都可以实现swiper高度自适应的效果,你可以根据自己的实际需求选择其中一种方法来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六月飞冷雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值