微信小程序tab页、轮播图demo

bovenson 发布于2019-08-01 16:58 / 1961人阅读

摘要：效果思路利用小程序列表渲染功能，读取导航栏中栏目数据的和。将存入事件中可以读取的中。读取这个值之后，修改相应模块元素的，修改样式。

效果：

思路：
利用小程序列表渲染功能，读取导航栏中栏目数据的index和item。将index存入事件中可以读取的data中。js读取这个data值之后，修改相应模块元素的class，修改样式。

最巧妙的就是利用{{currentNavbar==idx ? "active" : ""}}这个数据绑定判断当前块是否被选中的状态

wxml：


  
    {{item}}

js：

Page({
  data: {
    navbar: ["推荐", "新作", "展览"],
    currentNavbar: "0",
  },
  swichNav:function(e){
    this.setData({
      currentNavbar: e.currentTarget.dataset.idx
    });
  },
}

wxss（部分）：

.navbar {
    display: flex;
    border-bottom: 1px solid #eee;
}
.navbar-item {
    flex: 1.0;
    text-align: center;
    font-size: 14px;
    color: #999;
    margin-bottom: -1px;
}
.navbar-text {
    display: block;
    width: 30px;
    padding: 10px;
    margin: auto;
}
.navbar-text.active {
    border-bottom: 2px solid #000;
    color: #000;
    font-weight: bold;
}

延伸：类似tab切换的卡片切换效果（稍作修改即可成为轮播图）

效果：

wxml：



  
    {{item.word}}

wxss：

.wrap{
  margin-top: 20rpx;
  color: #999;
  position: relative;
  width: 750rpx;
  height: 250rpx;

}

.nav-item{
  width: 400rpx;
  height: 200rpx;
  box-shadow: 0 0 5rpx #e24233;
  padding: 5rpx;
  transition: all 0.5s;
  word-break:break-all;
  background-color: snow;
}

.prev{
  position: absolute;
  transform: scale(0.8);
  left: -280rpx;
  margin-right: 55rpx;
}

.current{
  position: absolute;
  left: 50%;
  margin-left: -200rpx;

}

.next{
  position: absolute;
  left:620rpx;
  top: 0;
  transform: scale(0.8);
  z-index: 10;
}

.next+.next{
  z-index: -1;
  background-color: deepskyblue;
}

最后.next+.next这个样式是为了使卡片切换时能看到右侧卡片的移动过程，而不是右侧一直有一个不动的卡片

js：

var flag = 0;
var classCatch = ["current", "next", "next", "next"];
var touch = [0,0];

Page({
  data: {
    testClass:classCatch,
    testCurrentNav:0,
    testNav:[{
      word:"111我来自后方111111111111111111111111",
    },{
        word: "222我来自后方222222222222222222222222222222",
    },{
        word: "333我来自后方33333333333333333333333333333333333333",
    },{
        word: "444我来自后方4444444444444444444444444444444444444",
    }]
  },
    /**
   * 测试轮播图
   */
  touchStart (e){
    touch[0] = e.touches[0].clientX
  },
  touchEnd (e){
    touch[1] = e.changedTouches[0].clientX;
    if(touch[0]-touch[1]>5){
      this.swipNext();
    } else if (touch[1] - touch[0] > 5){
      this.swipPrev();
    }
  },
  swipNext (e) {
     flag++;
     if (flag < this.data.testNav.length){
       for (var i = 0; i < this.data.testNav.length; i++) {
         if (i == flag) {
           classCatch[i] = "current";
         } else if (i < flag) {
           classCatch[i] = "prev";
         } else {
           classCatch[i] = "next";
         }
       }
       this.setData({
         testClass: classCatch
       })
     }else{
       flag = this.data.testNav.length-1;
     }
  },
  swipPrev(e) {
    flag--;
    if (flag+1 > 0 ) {
      for (var i = 0; i < this.data.testNav.length; i++) {
        if (i == flag) {
          classCatch[i] = "current";
        } else if (i < flag) {
          classCatch[i] = "prev";
        } else {
          classCatch[i] = "next";
        }
      }
      this.setData({
        testClass: classCatch
      })
    } else {
      flag = 0;
    }
  }
}）

目前觉得比较简洁的就是这样的写法，毕竟比较小白，如果大佬们有更简洁的方法，请多多指教。

云服务器 GPU云服务器微信小程序Demo 微信小程序轮播图微信小程序支付

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

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

微信小程序 bug 集中营

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

he_xd 2019-08-02 12:03 评论0 收藏0
微信小程序 bug 集中营

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

PascalXie 2019-08-29 17:19 评论0 收藏0
微信小程序 bug 集中营

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

lordharrd 2019-08-26 13:21 评论0 收藏0
小爱童鞋@你，一起来撸个小程序吧

摘要：轮播图区域这里微信小程序给我们提供了组件，直接用就可以了。但是需要注意的是在微信小程序里，强烈推荐使用弹性布局首页商品展示区这里的商品都是分块展示，很有规律，因此整个商品展示都可以直接用遍历出来。 showImg(https://user-gold-cdn.xitu.io/2018/6/11/163ed74a0fff9596?w=1262&h=676&f=jpeg&s=174374);...

MiracleWong 2019-08-29 15:40 评论0 收藏0