AI代码解释 letquery=wx.createSelectorQuery().in(this)query.select('.title').boundingClientRect(function(res){//在这里做计算,res里有需要的数据}).exec() 注意在组件component里使用的话,要用wx.createSelectorQuery().in(this),将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页...
一个框架内每个组件的设计,都有设计者的考虑,每个组件都有其特殊的用途。如果说view的存在,主要是为了实现各种常见的ui布局,那么今天分享的,是「三动」容器组件之一的scroll-view。它与movable-view、cover-view,是三动组件,都是为了方便开发者实现特定场景下的特殊业务功能而设计的。 没有这些组件,开发者自己通过v...
一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去。结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏幕滑动而变化,可能还会引起页面抖动,最后还是选择scroll-view(可滚动视图区域)组件来实现锚点效果。 具体实现 具体API就不赘述了,可以...
<scroll-view scroll-y="true" scroll-y="{{isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' style='overflow: scroll;-webkit-overflow-scrolling:touch;margin-top:130px;'> <block wx:key="index" wx:for="{{dataShow}}"> <view data-index='{{index}}' class="order-item"...
`<scroll-view scroll-y='true' class='nav'> <view wx:for='{{list}}' wx:key='{{item.id}}'data-id='{{item.id}}' class='navList {{currentIndex==index?"active":""}}' bindtap="listClick" data-index='{{index}}'>{{item.name}}</view> </scroll-view>` 1.设置scroll-y让其可...
<view wx:for="{{list}}" id="{{item}}" class="test"> {{item}} </view> </scroll-view> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. .wxss代码 AI检测代码解析 .scr{ position: relative; height: 500rpx } .test{ height: 80rpx; ...
<view style="position: absolute; bottom: 50rpx; right: 30rpx; width: 120rpx; height: 120rpx; border: solid 1px green;" wx:if="{{scrollTop.goTop_show}}" catchtap="goTopFun"></view> JS: JavaScript Page({data:{test:"",scrollTop:{scroll_top:0,goTop_show:false}},scrollTopFun:func...
主要使用 calc这个计算 css 首先获取当前scroll-view组件在屏幕中位置 像这样 data: { top:'', }, let query=wx.createSelectorQuery() query.select('.scroll-view').boundingClientRect((e) =>{//console.log(e)this.setData({ top:e.top
<block wx:for='{{articles}}' wx:key='{{item.id}}'> <view class='articles-container'> <view class='info'> <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}} <text class='created-at'>{{item.created_at}}</text> ...
需求是对话列表收到新消息后,需要自动将 scroll-view 滚动至底部显示最新对话消息。 使用 wx.createSelectorQuery().select('#viewId').boundingClientRect 方式获取高度时,发现数据更新后并不能获取最新view 高度,而是再次手动滑动至底部后 rect 对象内包含的 bottom / height 数值才会更新,当然了,这样小伙伴无法愉...