微信小程序左右联动的坑我来踩...

原创已于 2024-07-08 14:54:22 修改 · 97 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序左右联动

于 2018-10-17 14:52:20 首次发布

微信小程序专栏收录该内容

11 篇文章

订阅专栏

// 点击左边导航定位右边导航位置

// 滑动右边导航左边导航滑动跟随并改变样式

wxml

<view class="container">  
  <!--左侧栏-->
  <scroll-view class='scroll_left' scroll-y="true" style="height:{{winHeight}}px;" scroll-with-animation="true"   scroll-top='{{scrollTop}}'>
    <view class="nav_left"> 
      <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">  
        <!--当前项的id等于item项的id，那个就是当前状态-->  
         
        <view class="nav_left_items {{curNav == itemName.value ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{itemName.value}}">{{itemName.name}}{{index}}</view>  
      </block>  
    </view>
  </scroll-view>

  <!--右侧栏-->
  <scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" bindscroll="scroll">
    <view class="nav_right"> 
      <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this" >
        <view class='minl' id='{{itemName.value}}' >{{itemName.name}}</view>
          <block wx:for="{{itemName.pro_list}}" wx:key="*this"> 
            <view class="nav_right_items" > 
              <navigator url="../detail/detail" hover-class="other-navigator-hover">
                <view>   
                  <image src="{{item.picture}}"></image>
                  <view >  
                    <text>{{item.desc}}</text>  
                  </view> 
                </view>  
              </navigator>  
            </view>      
          </block> 
        </view>
      <view style="width:100%;height:30rpx;background:#f0f4f7"></view>       
    </view>
  </scroll-view>
</view>

wxss

/*总体主盒子*/  
.container {  
  position: relative;  
  width: 100%;  
  height: 1500rpx;  
  background-color: #f0f4f7;  
  color: #939393;  
}  
/*左侧栏主盒子*/  
.nav_left{  
  /*设置行内块级元素（没使用定位）*/  
  display: inline-block;  
  width: 100%;  
  height: 100%;  
  /*主盒子设置背景色为灰色*/  
  background: #fff;  
  text-align: center;  
  /* position: fixed;  */
  left: 0;
  top: 0;
  border-top: 1rpx solid #dedede;
 
}  
/*左侧栏list的item*/  
.nav_left .nav_left_items{  
  background: #fff;
  /*每个高30px*/  
  height:80rpx;  
  /*垂直居中*/  
  line-height: 80rpx;  
  /*再设上下padding增加高度，总高42px*/  
  padding: 15rpx 0;  
  /*只设下边线*/  
  /* border-bottom: 1px solid #dedede;   */

  /*文字14px*/  
  font-size: 29rpx;
  color: #101010;  
  font-weight: 700;
}  
/*左侧栏list的item被选中时*/  
.nav_left .nav_left_items.active{  
  /*背景色变成白色*/  
   background: #f0f4f7;
   color: #ed1000;   
}  
  
/*右侧栏主盒子*/  
.scroll_right{  
  /*右侧盒子使用了绝对定位*/  
  position: fixed;
  top: 0;  
  right: 0; 
  overflow: auto; 
  flex: 1;  
  /*宽度75%，高度占满，并使用百分比布局*/  
  width:80%;  
  height: 100%;   
  padding: 0 ;  
  box-sizing: border-box;  
  background-color: #FFF;
  border-top: 1rpx solid #dedede;
   border-left: 1rpx solid #dedede;
   
} 
/* .mink{border: 1rpx #ed1000 solid;} */
.mink::after{
  display:block;content:'';clear:both;
}
.jiul,.jiul image{
  width: 100%;
  height: 170rpx;
}
.minl{
  font-size: 29rpx;
  color: #777;
  text-align: center;
  line-height: 60rpx;
  height: 60rpx;
  float: left;
  background: #fff; 
  width: 100%;
  /* height: 50rpx;  */
} 
.minl:before{
    display: inline-block;
    position: relative;
    top:-8rpx;
    right: 20rpx;
    content: "";
    width: 20rpx;
    height: 0rpx;
    border: 1rpx solid #ccc;
}
.minl:after{
    display: inline-block;
    position: relative;
    top:-8rpx;
    left: 20rpx;
    content: "";
    width: 20rpx;
    height: 0rpx;
    border: 1rpx solid #ccc;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.mink{
  width: 100%;
  background: #fff;
  height: 100%;
}
/*右侧栏list的item*/  
.nav_right_items{  
  /*浮动向左*/  
   float: left;   
  /*每个item设置宽度是33.33%*/  
  width:33.33%;  
  height: 180rpx;  
  text-align: center; 
  color: #4a4a4a; 
  background: #fff;
  border:1rpx #FFF solid;
  border-left: none;
  border-right: none;
}  
.nav_right_items image{  
  /*被图片设置宽高*/  
  width: 90%;  
  height: 50px; 
  margin-top: 15rpx; 
}  
.nav_right_items text{  
  /*给text设成块级元素*/  
  display: block;  
  margin-top: 5rpx;  
  margin-bottom: 10rpx;
  font-size: 26rpx;  
  /*设置文字溢出部分为...*/  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover{
  background:#000;
}

.scroll_left{
  width:20%;
  height:100%;
  background:#fff;
  text-align:center; 
  position: fixed;
  left: 0;top: 0
}

wxjs

var list = require('list.js')
Page({
  data: {
    // 左侧点击类样式
    curNav: 'A',
    scrollTop: 0,
    // 定义一个空数组，用来存放右侧滑栏中每一个商品分类的 Height
    listHeight: '',

  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    var that = this;
    // 定义右侧标题的 rpx 高度 和 px 高度
    var right_titleRpxHeight = 60;
    var right_titleHeight;
    // 定义右侧单个商品的 rpx 高度 和 px 高度
    var right_contentRpxHeight = 180;
    var right_contentHeight;
    // 定义左侧单个tab的 rpx 高度 和 px 高度
    var left_titleRpxHeight = 140;
    var left_titleHeight;
    //  获取可视区屏幕高度
    wx.getSystemInfo({
      success: function (res) {
        // percent 为当前设备1rpx对应的px值
        var percent = (res.windowWidth / 750);
        that.setData({
          winHeight: res.windowHeight,
          right_titleHeight: Number(right_titleRpxHeight * percent),
          right_contentHeight: Number(right_contentRpxHeight * percent),
          left_titleHeight: Number(left_titleRpxHeight * percent)
        })
      }
    })
    // 把请求到的 list 中的数据赋值给  listChild1
    console.log(list[0].pro_list[0].desc);
    var listChild1 = list;
    
    // 定义一个 names ，用于存放 scroll-into-view 使用的 id
    var names = '';
    console.log(listChild1);
    // 循环 listChild1 中的每一项
    for (var z = 0; z < listChild1.length;z++){
      console.log(listChild1[z].value)
      names += ":" + listChild1[z].value;
      // list[z].pro_list.length
      console.log(listChild1[z].pro_list.length)
      //  计算右侧每一个分类的 Height 。
    
      // 右侧每一个分类中每一行放3个商品，所以(listChild1[z].pro_list.length - 1) /3 除3
      // 最后加上 right_titleHeight，此时 height 为右侧一个完整分类的高度
      var height = Math.ceil(listChild1[z].pro_list.length / 3) * this.data.right_contentHeight + this.data.right_titleHeight;
      console.log(height)
      this.data.listHeight += ":" + height;
      this.setData({
        // 把 listChild1 赋值给 list ，供 wxml 中循环使用
        list: listChild1,
        listHeight: this.data.listHeight
      })
    }
    console.log(this.data.listHeight)

    var names = names.substring(1).split(':');
    this.setData({
      names: names
    })
  },
  // 右侧滑栏的 bindscroll 事件函数
  scroll(event) {
    // 把 listHeight 切割成数组
    var height = this.data.listHeight.substring(1).split(':');
    // 定义一个 index 供左侧边栏联动使用
    var index = 1;
    var num = 0;
    for (var i = 0; i < height.length; i++) {
      // 累计右侧滑栏滚动上去的每一个分类的 Height
      num += parseInt(height[i]);
      // 循环判断 num 是否大于右侧滑栏滚动上去的 Height ，然后 get 到 i 值赋给 index
      console.log(height[i]);
      console.log(num);
      console.log(event.detail.scrollTop)
      if (num <= event.detail.scrollTop) {
        index = i + 1;
        // 如果右侧滑栏滚动高度小于单个类别高度的 1/2 时，index 为 0

      }
      if (event.detail.scrollTop < height[0] - 10) {
        index = 0;
      }
      // break;
    }
    // 定义并设置左侧边栏的滚动高度
    var left_scrollTop = this.data.left_titleHeight * index
    console.log(this.data.names[index])
    this.setData({
      // scrollTop: left_scrollTop, //左侧滚动
      // 动态给左侧滑栏传递对应该项的 id，用于高亮效果显示
      curNav: this.data.names[index]
    })
  },
  //点击左侧 tab ，右侧列表相应位置联动 置顶
  switchRightTab: function (e) {
    var id = e.target.id;
    console.log(id);
    this.setData({
      scrollTopId: id,
      // 左侧点击类样式
      curNav: id,
    })
  }
})

list.js



var lists = [

  {
    "value": "A",
    "name": "00",
    "pro_list": [
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }
    ]
  },
  {
    "value": "B",
    "name": "01",
    "pro_list": [{ "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }, { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }, { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }
    ]
  },
  {
    "value": "C",
    "name": "02",
    "pro_list": [
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }
    ]
  },
  {
    "value": "D",
    "name": "03",
    "pro_list": [
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }
    ]
  },
  {
    "value": "E",
    "name": "04",
    "pro_list": [
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" },
      { "picture": "../../image/phone/12.jpeg", "desc": "葡萄酒" }
    ]
  }
]

module.exports = lists;
// module.exports = list;