微信小程序实现三级联动的代码

最新推荐文章于 2024-08-13 16:20:34 发布

『〖安〗』

最新推荐文章于 2024-08-13 16:20:34 发布

阅读量371

点赞数

分类专栏：微信小程序的小部件文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/qq_48789210/article/details/126470807

版权

本文介绍了如何在微信小程序中实现三级联动效果，通过详细解析index.js、index.wxml和index.wxss文件的代码实现，并展示最终的效果图。

摘要由CSDN通过智能技术生成

1.index.js

const App = getApp()

Page({
  data: {
    winHeight:"",//窗口高度
    currentTab:0, //预设当前项的值
    scrollLeft:0, //tab标题的滚动条位置
    currentIndex: 0, //默认是活动项
    hideModal:false//遮罩层
  },
      // 滚动切换标签样式
      switchTab:function(e){
        let that=this;
        that.setData({
            currentTab:e.detail.current
        });
        that.checkCor();
    },
    // 点击标题切换当前页时改变样式
    swichNav:function(e){
        var cur=e.target.dataset.current;
        console.log(cur);
        if(this.data.currentTaB==cur){return false;}
        else{
            this.setData({
                currentTab:cur
            })
        }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor:function(){
      if (this.data.currentTab>4){
        this.setData({
          scrollLeft:300
        })
      }else{
        this.setData({
          scrollLeft:0
        })
      }
    },
  pagechange: function (ee) {
    let that=this;
    console.log(ee.detail.source)
    if ("touch" === ee.detail.source) {
      let currentPageIndex = that.data.currentIndex;
      currentPageIndex = (currentPageIndex+1) % 2;
     
      that.setData({
        currentIndex: currentPageIndex,
      })
    }
  },
// 弹出、隐藏遮罩层
show_hideModal:function(){
  let that=this;
  that.setData({
    hideModal:true
  })
},
hideModal:function(){
  let that=this;
  that.setData({
    hideModal:false
  })
},
  // swiper-item触发bindchange事件
  pagechange: function (e) {
    // 通过touch判断，改变tab的下标值
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex;
      currentPageIndex = (currentPageIndex + 1) % 2;
      // 拿到当前索引并动态改变
      this.setData({
        currentIndex: currentPageIndex,
      })
    }
  },

  //点击tab时触发
  titleClick: function (e) {
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })
  },
//提交
  confirm:function(){
    wx.showToast({
      title:'提交成功',
      duration:1000,
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this; 
        //  高度自适应
        wx.getSystemInfo( {  
            success: function( res ) {  
                var clientHeight=res.windowHeight,
                    clientWidth=res.windowWidth,
                    rpxR=750/clientWidth;
              var  calc=clientHeight*rpxR-180;
                console.log(calc)
                that.setData( {  
                    winHeight: calc  
                });  
            }  
        });
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})