小程序 组件的一些经验

一、滚动条位置(可视内容)跟随改变+动画

scroll-view

1.对于宽度/高度固定的,可以选用这种


  
  

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);

设计一些组件。要多一个卡片的思想。可以切换

你可能感兴趣的:(小程序 组件的一些经验)