小程序 组件的一些经验
2019-05-28 本文已影响1人
js_hcl
一、滚动条位置(可视内容)跟随改变+动画
scroll-view
1.对于宽度/高度固定的,可以选用这种
<scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation>
<view wx:for="{{10}}" wx:key bindtap="tabSelect" data-index="{{index}}">
</view>
</scroll-view>
tabSelect(e) {
this.setData({
scrollLeft: (e.currentTarget.dataset.index-1)*app.globalData.windowWidth/5
})
}
//重点说明:
/*
1.e.currentTarget.dataset.index-1:即index 为0,1其实不会让其滚动,从2即第三个开始才会。
如果要从第4个点击让滚动条滚动一个位置,则.e.currentTarget.dataset.index-2
2.app.globalData.windowWidth/5为,每个item占用的宽度。刚好移动这个距离
*/
2.对应每个item宽度/高度不固定的,可以选用这种
scroll-into-view="category-{{categoryActiveIndex-1}}"
二、组件
1. 组件绑定值
父组件修改值,组件内部监听值变化,然后做出反应
2.组件设置id
父组件,获得该组件对象,然后调用其函数
const pages = getCurrentPages();
const ctx = pages[pages.length - 1];
const componentCtx = ctx.selectComponent(selector);
//调用子组件的方法
ctx.handleShow(options);
设计一些组件。要多一个卡片的思想。可以切换