外层的view添加2个事件,一个是触摸开始,一个触摸结束,在事件里可以根据target的坐标判断是否发生左右滑动,以此改变页面及标签的转变。发生改变时,标签动态改变active样式,内容则用translate实现左右平移。
WXML:
<view class="page" bind:touchstart="pageTouchStartHandler" bind:touchend="pageTouchEndHandler" >
<button class="tab-menu {
{class1}}" bindtap="showTab1">tab1</button>
<button class="tab-menu {
{class2}}" bindtap="showTab2">tab2</button>
<view class="view-container" style='{
{viewTranslate}}'>
<view class="tab-view" style="background:red">view1</view>
<view class="tab-view" style="background:blue">view2</view>
</view>
</view>
WXSS: