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

作者：模板之家 2018-1-31 10:38 1134人关注

幻灯片使用微信小程序原生组件swiper实现。 swiper indicator-dots={{indicatorDots}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} block wx:for={{imgUrls}} wx:key=index swiper-item im ...

幻灯片

使用微信小程序原生组件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
            });
        }   
    });
				
			

	