apicloud底部tab切换效果

浏览(89) | 2018-07-07 09:15

apicloud开发app的时候我们京城会用到底部切换效果,那么如何切换才会做到更加的顺滑呢?

基本的原理就是使用openFrameGroup,

首先看html代码部分:


<nav class="mui-bar mui-bar-tab footer">
        <a index=0 class="mui-tab-item mui-active index_shouye newact">
            <div><span class="iconfont icon-shouye "></span></div>
            <span class="mui-tab-label">首页</span>
        </a>
        <a index=1 class="mui-tab-item index_cart newact">
            <div><span class="iconfont icon-daizi1"></span></div>
            <span class="mui-tab-label">9.9</span>
        </a>
        <a index=2 class="mui-tab-item index_order newact">
            <div> <span class="iconfont icon-miandanquan- "></span></div>
            <span class="mui-tab-label">免单</span>
        </a>
        <a index=3 class="mui-tab-item index_my newact">
            <div> <span class="iconfont icon-wode "></span></div>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>

js部分:
  var apiready = function() {

            api.openFrameGroup({
                name: 'Frames',
                rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight - 50
                },
                preload: 4,
                scrollEnabled: false,
                frames: [{
                    name: 'index',
                    url: 'html/page/index.html',
                    bgColor: '#fff',
                }, {
                    name: 'jiukuaijiu',
                    url: 'html/page/jiuyuan.html',
                    bgColor: '#fff'
                }, {
                    name: 'miandan',
                    url: 'html/page/miandan.html',
                    bgColor: '#fff'
                }, {
                    name: 'my',
                    url: 'html/page/my.html',
                    bgColor: '#fff'
                }]
            }, function(ret, err) {
                var index = ret.index;
            });
            
            $("nav a").on("click", function() {
                var index = $(this).attr("index")
                $("nav a").removeClass("mui-active")
                $(this).addClass("mui-active")
                api.setFrameGroupIndex({
                    name: 'Frames',
                    index: index,
                    scroll:true
                });
            })
        }

其中原理就是先创建一个FrameGroup,里边有四个子页面,子页面分别对应的索引为0、1、2、3,当我们分别点击不同的菜单的时候,通过frame索引进行切换就行了,其中值得注意的是setFrameGroupIndex方法中有一个scroll配置项,默认是false的,就是切换的时候没有动画效果
如果我们配置成true,就会有平滑移动的效果。


赞(0)评论(0)

评论

js获取网址参数转换为json对象

在使用apicloud或者mui做app开发发的时候,我们需要点击按钮传参,我们通常做一个公用的函数来处理这个问题:var parseQueryString
2018-07-07 09:22浏览(72)
赞(0)评论(0)

apicloud底部tab切换效果

apicloud开发app的时候我们京城会用到底部切换效果,那么如何切换才会做到更加的顺滑呢? 基本的原理就是使用openFrameGroup, 首先看htm
2018-07-07 09:15浏览(89)
赞(0)评论(0)

apicloud关闭状态栏和主体重叠 沉侵式关闭

apicloud默认是开启沉侵式的,也就是说默认生成的app都是状态栏和主体重叠的,有时候我们不需要这种效果,那么如何关闭呢? 其实关闭沉侵式很简单,只需要修
2018-07-07 09:04浏览(126)
赞(0)评论(0)

小程序提示框

开发小程序的时候,我们都遇见一个问题就是,不能alert了,小程序禁用了alert函数, 小程序对应封装了很多自己的提示函数:onShow: function
2018-01-20 11:32浏览(58)
赞(0)评论(0)