微信小程序小技巧系列《一》幻灯片，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
            });
        }   
    });

转自：转载地址