码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-05-19 00:55:56      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:操作   issue   play   list   bin   data   com   ima   地址   

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

转自:转载地址

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

标签:操作   issue   play   list   bin   data   com   ima   地址   

原文地址:https://www.cnblogs.com/jlfw/p/12913854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!