资讯专栏INFORMATION COLUMN

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

MangoGoing / 1753人阅读

摘要:作者来自幻灯片使用微信小程序原生组件实现。配合在逻辑页面配置数据实现幻灯片导航切换由于微信小程序不能直接操作,所以这里设置一个值。用来模拟操作,来实现导航内容的切换用于模拟操作转自转载地址

作者:gou-tian
来自:github

幻灯片

使用微信小程序原生组件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操作,来实现导航内容的切换

    
        
            
                
                    {{item}}
                
            
        
    

用于模拟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
            });
        }   
    });

转自:转载地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/66368.html

相关文章

  • 程序技巧系列灯片tab导航切换

    摘要:作者来自幻灯片使用微信小程序原生组件实现。配合在逻辑页面配置数据实现幻灯片导航切换由于微信小程序不能直接操作,所以这里设置一个值。用来模拟操作,来实现导航内容的切换用于模拟操作转自转载地址 作者:gou-tian来自:github 幻灯片 使用微信小程序原生组件swiper实现。 ...

    rickchen 评论0 收藏0
  • 程序教程系列之设置标题栏和导航

    摘要:是一个数组,只能配置最少个最多个,按数组的顺序排序。示例运行以上就是本文的全部内容,希望对大家的学习有所帮助 微信小程序标题栏和导航栏的设置方法,具体内容如下 设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 showImg(https://segmentfault.com/img/remote/1460000017208224); ...

    Nosee 评论0 收藏0
  • 程序 bug 集中营

    摘要:利用这篇教程存储一些常用的微信小程序开发技巧,方便查找。但是第一,微信小程序是国内的,有中文文档,虽然它的文档说明有点坑,但好歹有文档,阅读理解对小伙伴们来说不是问题。 Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13  Hello 小伙伴们,如果觉得本文还不错,记得给个...

    he_xd 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<