AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:03:42

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序小技巧系列《一》幻灯片,tab导航切换
相关的资讯,希望对您有帮助。

微信小程序小技巧系列《一》幻灯片,tab导航切换

本文作者gou-tian,来自github幻灯片使用微信小程序原生组件swiper实现。 swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} block wx:for={{i ...

本文作者gou-tian,来自github

幻灯片

  • 使用微信小程序原生组件swiper实现。
    <swiper 
        indicator-dots={{indicatorDots}} 
        autoplay={{autoplay}} 
        interval={{interval}} 
        duration={{duration}}>
        <block wx:for={{imgUrls}} wx:key=index>
            <swiper-item>
                <image src={{item}} class=slide-image 
                mode=scaleToFill/>
            swiper-item>
        block>
    swiper>

配合在逻辑页面配置数据实现幻灯片

    Page({
        data: {
            imgUrls: [],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 1000,
        },
        onLoad: function(){
            util.ajax({
                url: https://api.zg5v.com/index.php/index/show/banner,
                data: {
                    uid: 194
                },
                cb: function(res) {
                    setSilde.call(self, res.data.data);
                }
            });
        }
    })

tab导航切换

  • 由于微信小程序不能直接操作DOM,所以这里设置一个data-id值。(data-id={{index}} )用来模拟DOM操作,来实现导航内容的切换
    <view class=nav-warp>
        <view class=tab>
            <block wx:for={{navItem}} wx:key=index>
                <text bindtap=navToggle 
                    data-id={{index}} 
                    class=tab-txt 
                            {{showItem == index ? active :  }}>
                    {{item}}
                text>
            block>
        view>
    view>

用于模拟DOM操作

    Page({
        data: {
            showItem: 0
        },
        navToggle: function(e){
            this.setData({
                showItem: e.target.dataset.id    
            });
            util.dataList.call(this, {
                url: https://api.zg5v.com/index.php/index/show/qtshow,
                data: {
                    uid: 148,
                    fenid: e.target.dataset.id - 1,
                    num: 0
                },
                cb: util.petAge
            });
        }   
    });

81阅读 | 0评论
你的回应