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

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

 

轉自：轉載地址