小程序做一个能够左右滑动切换的多tab页面

主要原理:使用 <swiper><scroll-view> 组件
代码片段https://developers.weixin.qq.com/s/mLx4FWmF757Z
GitHub: github.com/WozHuang/Miniprogram-Demo

小程序是轻量级的app,本应小巧精悍、用完即走,但是很多企业还是想要在这辆自行车上装发动机,要求拥有原生APP的操作体验。作为一介码农也只能默默想办法实现了,总不能说这东西我不想做吧

有兴趣可以在Github看看另外几个需求实现

效果图

这次要实现的是在APP中常见的多TAB滑动切换功能,没有什么可介绍的,直接上成果图:

本来如果在web端上实现,直接去找现成的轮子使用就可以了(避免重复造轮子,而且我造的轮子也不见得有别人的好)

奈何小程序与web还有些区别,现成的轮子都用不上,还是只能自己动手造一个了。幸运的是小程序自带的部分组件也能用得上,不用从头开始造。

组件结构

<page>
    <bar />             // 顶部的tab选择器
    <swiper>            // 能够左右滑动的swiper组件
        <list>          // 某一个tab的列表
            <item />    // 数据项
            ...
        </list>
        ...
    </swiper>
</page>

组件结构也并不复杂,这样层层嵌套只是为了保证组件各司其职、利于维护

所利用的属性:

  1. swiper

    • 可以左右滑动
    • 通过current属性切换到指定的项
    • 监听手动滑动的change事件
  2. scroll-view
    • 用 scroll-into-view 属性滑动到指定的位置
    • scroll-with-animation="{{true}}" 平滑滚动
    • duration="{{200}}" 属性指定动画时长

存在的不足

  1. 从第一项切换到第三项时swiper会 1 -> 2 -> 3 的顺序切换,似乎没有直接切换的办法(设置swiper的duration属性为0可以瞬间切换,但是滑动的效果会变得奇怪)
  2. 切换动画偶尔会掉帧,原因未知,优化方式未知

原文地址:https://www.cnblogs.com/wozho/p/10779598.html

时间: 2024-10-10 04:29:52

小程序做一个能够左右滑动切换的多tab页面的相关文章

用小程序做一个类似于苹果AssistiveTouch功能

一.首先我先介绍一下,我们要做一个什么样的项目功能 项目功能就是一个音频点击播放,当点击为播放的状态时,一个音频的动图出现,而且是可以跟随着手指的滑动而滑动,而且,在滑动动图的时候,当前下的页面是不可以跟随着我的滑动而上下滚动,当停止滑动的时候,音频动图停靠在手机的左侧或者右侧,而当前下的页面是可以上下滚动的,功能介绍到此为止,下面我们说一下思路. 二.我们做这个功能,第二步就是要想思路 思路就是,利用微信中的滑动事件,外加控制css样式,来完成这个功能. 三.这是项目的ui图,废话不多说,直接

小程序 开发之向左滑动实现删除功能

为了让用户的体验效果有一个很大的提升,在删除 单行信息 的 时候,我们逐渐从点击删除到向左 滑动实现删除.那么小程序的左滑删除是怎么实现的呢? 效果如图: 第一步:先进行页面的布局: <!-- 自定义单选/多选/全选实现删除功能 --> <view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{i

如果写一个android桌面滑动切换屏幕的控件(三)

下面我们把这个控件内嵌到Layout中做一些动画和展示,效果图: 这个子控件可以上下移动,可以左右滑动,如果上下滑动距离大于左右滑动距离,则必须上下滑动 这样来写onTouch事件: @Override public boolean onTouchEvent(MotionEvent ev) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMov

如果写一个android桌面滑动切换屏幕的控件(一)

首先这个控件应该是继承ViewGroup: 初始化: public class MyGroup extends ViewGroup{ private Scroller mScroller; private float mOriMotionX; private float mLastMotionX; private VelocityTracker mVelocityTracker; private int mTouchState = TOUCH_STATE_REST; private static

如果写一个android桌面滑动切换屏幕的控件(二)

在viewgroup执行: public void snapToScreen(int whichScreen) { whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1)); boolean changingScreens = whichScreen != mCurrentScreen; mNextScreen = whichScreen; int mScrollX = this.getScrollX(); fin

小程序之如和使用view内部组件来进行页面的排版功能

这篇文章主要介绍了关于小程序之如和使用view内部组件来进行页面的排版功能,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 涉及知识点: 1.垂直排列,水平排列 2.居中对齐 示例: 1.默认排版 , 一个父组件里面两个子view 显示效果: 2.先给父view设置一个高度和颜色值,用于看效果 3.实现水平排列和垂直排列的样式 水平排列: 垂直排列(不进行设置,默认垂直排列): 4.实现居中效果 居中效果分为两种情况,依赖于3中的水平排列还是垂直排列. ①.当水平排列的时候 , j

微信小程序swiper禁止用户手动滑动

最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用  catchtouchmove  事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 贴代码: WXML: <swi

如何使用微信小程序开发一个弹窗页面(附源码)

在小程序的开发过程中,我们肯定会遇到开发一个弹窗页面的情况,我们先看一下小程序官方对于弹窗页面的解释.API的接口如下 从官方给出的代码示例来看,想当简单,就像一个asert,并不能看出弹窗的真实需求.所以今天HTML51.COM就写了一个弹窗小程序教程,供大家学习参考.首页我们先看一下动态的效果图: 我们首先看到的是首页代码: <view class="copyright"> <view class="copyright_item">Cop

小程序选项卡,可左右滑动

wxhtml: <view class="swiper-tab"> <view class="tab-item swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="clickTab">我要取专票</view> <view class="tab-item swiper-tab-item