真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信小程序?qū)崿F(xiàn)tab左右切換效果

本文實例為大家分享了微信小程序?qū)崿F(xiàn)tab左右切換展示的具體代碼,供大家參考,具體內(nèi)容如下

為花山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及花山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站制作、花山網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!

分析

1、設(shè)置data-current屬性用于:點擊當(dāng)前項時,通過點擊事件swichNav中處理e.dataset.current取到點擊的目標(biāo)值。

2、swiper組件的current組件用于控制當(dāng)前顯示哪一頁

3、swiper組件綁定change事件switchTab,通過e.detail.current拿到當(dāng)前頁

wxml:


  
    
      
        
          
        
      
    
  

------------------------------------------------

  
    
        
          
            
              
                
                  
                
              
              
                
                  {{tabItem.title}}
                  
                    {{tabItem.text}}
                    {{tabItem.text}}
                  
                
                
                  {{tanItem.cost}}
                
              
            
          
        
    
  

JS

Page ({
  const app = getApp()
  data: {
    recordMian: [
      {
        title: "插畫藝術(shù)"
      },
      {
        title: "工藝作品"
      },
      {
        title: "服裝藝術(shù)"
      },
      {
        title: "三維建模"
      },
    ],
    tabContent: [
      {
       title: "臺燈臥室床頭 簡約現(xiàn)代書房 北歐宜家創(chuàng)意裝飾個性圓球臺燈床頭燈",
       text: "臺燈",
       cost: "1255",
       imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
      },
      {
       title: "雪域冰雪天地8寸牛乳芝士蛋糕",
       text: "蛋糕",
       cost: "15",
       imgUrl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
      },
    ],
    currentTab: 0,
    navScrollLeft: 0
  },
  // 事件處理函數(shù)
  onLoad: function() {
    // 控制record-box隨鼠標(biāo)切換調(diào)整位置
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
     } else if (this.data.canIUse) {
        app.userInfoReadyCallback = res => {
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      }
    else {
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
  },
  // 滑動事件
  // 點擊標(biāo)題切換當(dāng)前頁時改變樣式
  switchNav(event) {
    var cur = event.currentTarget.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  // 滾動切換標(biāo)簽樣式 
  switchTab(event) {
    var cur = evnet.detail.current;
    var singeNavWidth = this.data.windowWidth / 5;
    this.setData({
      currentTab: cur,
      navScrollLeft: (cur - 2) * singleNavWidth
    });
  }
})

效果圖:

微信小程序?qū)崿F(xiàn)tab左右切換效果

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。


新聞名稱:微信小程序?qū)崿F(xiàn)tab左右切換效果
URL地址:http://weahome.cn/article/phojhc.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部