微信小程序小技巧系列《一》幻燈片，tab導航切換

作者：gou-tian

來自：github

幻燈片

• 使用微信小程序原生組件swiper實現。

    <swiper 
        indicator-dots="`indicatorDots`" 
        autoplay="`autoplay`" 
        interval="`interval`" 
        duration="`duration`">
        <block wx:for="`imgUrls`" wx:key="index">
            <swiper-item>
                <p_w_picpath src="`item`" class="slide-p_w_picpath" 
                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
            });
        }   
    });

轉自：轉載地址