微信小程序tab頁、輪播圖demo

bovenson 發布于2019-08-01 16:58 / 1994人閱讀

摘要：效果思路利用小程序列表渲染功能，讀取導航欄中欄目數據的和。將存入事件中可以讀取的中。讀取這個值之后，修改相應模塊元素的，修改樣式。

效果：

思路：
利用小程序列表渲染功能，讀取導航欄中欄目數據的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 微信小程序輪播圖微信小程序支付

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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