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

心已赠人 2022-01-16 15:59 490阅读 0赞

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

**转自：[转载地址][Link 1]**

转载于:https://blog.51cto.com/12350196/1883069

[github]: https://github.com/gou-tian/gou-tian.github.io/issues/2
[Link 1]: http://www.wxapp-union.com/article-700-1.html