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

作者：gou-tian
来自：github

幻灯片

• 使用微信小程序原生组件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操作，来实现导航内容的切换

    
        
            
                
                    {{item}}
                
            
        
    

用于模拟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
            });
        }   
    });

转自：转载地址