作者：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
            });
        }   
    });

转自：转载地址