老规矩,先看效果图 可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大 原理其实很简单,我这里把我研究后的源码发给大家吧。 wxml文件如下 <!-- 导航栏 --> <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx"> <view class="na...
3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 <view><scroll-viewscroll-x="true"class="tab-h"scroll-left="{{scrollLeft}}"><viewclass="tab-item {{currentTab==0?'active':''}}"data-current="0"bindtap="swichNav">健康</view><viewclass="tab-item {{currentTab==1?'ac...
scrollLeft:水平滚动时滚动条当前的位置,在垂直滚动时该值为0。 scrollTop:垂直滚动时滚动条当前的位置,在水平滚动时该值为0。 scrollHeight:垂直滚动时所有子视图的总高度(包括子视图之间的间距),在水平滚动时,该值是scroll-view组件的高度。 scrollWidth:水平滚动时所有子视图的总宽度(包括子视图之间的间距)。在...
<view class='Tab'> <view class='tabImgL' bindtap='lefttab'> <image mode="widthFix" src='{{zuosrc}}'></image> </view> <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap...
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康</view> <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感...
画带一个绿色的正三角形作为游标,注意游标是悬浮不动的,所以另起一个cancas来装它。当然它不是必须的,偷个懒ps一张三角形的png代替也无妨,甚至刻度其实也可以用加绝对定位来生成的。 定义刻度默认初值 that.setData({ scrollLeft: (currentValue - minValue) * ratio ...
var curIndex = Math.round(scrollLeft / itemWidth);//通过Math.round方法对滚动大于一半的位置进行进位 for (var i = 0, len = that.data.proList.length; i < len; ++i) { that.data.proListi.selected = false; } that.data.proListcurIndex.selected = true; ...
scrollLeft: 100, list: [] }, onLoad(){ setTimeout(()=>{ //假装异步获取数据 this.setData({ list: [1,2,3,4,5,6,7,8] }); },1000); } }) 看效果,发现scroll-view带在原地纹丝不动。惆怅~ let me see see 代码稍作改动:
<scroll-view scroll-x="true" scroll-with-animation="true" bindscroll="spikeScroll" class="scroll scroll-x" scroll-left="{{scrollLeft}}"> <view class="scroll-item index-nav" wx:for="{{catList}}" wx:key="catId"> <view class="index-nav-item flex-y-fs {{item.selected?'selected':...
scrollLeft: (currentValue - minValue) * ratio }); 绑定scroll-left参数,相当于iOS里了UIScrollView的contentOffset,手动让偏移到默认初值对应的坐标位置。 适配最小值 当业务场景需要做数据验证,例如金额要>0,年龄要大于18岁等,就得适配极值。 that.setData({ ...