效果图:

微信小程序的左右列表联动

微信小程序的左右列表联动

直接上代码:

wxml界面:

<view class='header'>

<text class='headerClass'>分类</text>

<text class='headerPin'>/品牌</text>

<view class="search">

<image src='/images/搜索.png'></image>

<text>搜索商品</text>

</view>

</view>

<view class='main'>

<view class='left'>

<scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true">

<block wx:for="{{leftText}}" wx:for-list="item">

<view class="{{classfiySelect == item.id?'active':''}}" data-id='{{item.id}}' bindtap='left_list'>

<text>{{item.text1}}</text>

</view>

</block>

</scroll-view>

</view>

<view class='right'>

<scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">

<block wx:for="{{rightData}}" wx:for-list="item">

<view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view>

<view bindtap='particulars' class='listItem' data-id='{{item.id}}'>

<block wx:for="{{item.frist}}">

<view class='listItem2' data-text="{{}}">

<view class='img'>

<image src='{{item.url}}'></image>

</view>

<view class='listText'>

<text>{{item.text}}</text>

<text class='money'>¥{{item.money}}</text>

<view>

<text>已售{{item.sum}}</text>

<button size='mini' bindtap='particulars'>立即抢购</button>

</view>

</view>

</view>

</block>

</view>

</block>

</scroll-view>

</view>

</view>

js界面:

// pages/class/class.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    classfiySelect: "",
    leftText: [{
        id: "01",
        text1: "美妆专区",
      },
      {
        id: "02",
        text1: "面部清洁",
      },
      {
        id: "03",
        text1: "洗护专区",
      },
      {
        id: "04",
        text1: "面膜",
      },
      {
        id: "05",
        text1: "口红",
      },
      {
        id: "06",
        text1: "美妆专区",
      },
      {
        id: "07",
        text1: "面部清洁",
      },
      {
        id: "08",
        text1: "洗护专区",
      },
      {
        id: "09",
        text1: "面膜",
      },
      {
        id: "010",
        text1: "口红",
      },
      {
        id: "011",
        text1: "美妆专区",
      },
      {
        id: "012",
        text1: "面部清洁",
      },
      {
        id: "013",
        text1: "洗护专区",
      },
      {
        id: "014",
        text1: "面膜",
      },
      {
        id: "015",
        text1: "口红",
      },
      {
        text1: "美妆专区",
      },
      {
        text1: "面部清洁",
      },
      {
        text1: "洗护专区",
      },
      {
        text1: "面膜",
      },
      {
        text1: "口红",
      },

    ],
    rightData: [{
        id: "01",
        title: "美妆专区",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
            id:1,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
            id: 2,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
      {
        id: "02",
        title: "面部清洁",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
      {
        id: "03",
        title: "洗护专区",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
      {
        id: "04",
        title: "面膜",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
      {
        id: "05",
        title: "口红",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
      {
        id: "06",
        title: "美妆专区",
        frist: [{
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
          {
            url: "/images/85309.jpg",
            text: "卡姿兰补水套装",
            money: 200,
            sum: 20,
          },
        ],
      },
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      classfiySelect: this.data.leftText[0].id
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  },
  //滚动触发
  scroll: function(e) {
    var scrollTop = e.detail.scrollTop,
      h = 0,
      classfiySelect;
    var that = this;
    that.data.leftText.forEach(function(clssfiy, i) {
      var _h =26 + that.length(clssfiy['id'])*102;
      if (scrollTop >= h){
        classfiySelect = clssfiy['id'];
      }
      h +=_h;
      console.log(h);
    })
    that.setData({
      classfiySelect: classfiySelect,
    })
  },
  //求每一栏高度
  length: function(e) {
    var that = this;
    var rightData = that.data.rightData;
    for (var i = 0; i < rightData.length; i++) {
      if(rightData[i]['id']==e){
        return rightData[i]['frist'].length;

      }
    }
  },
  //点击左边事件
  left_list: function(e) {
    var that = this;
    var l_id = e.currentTarget.dataset.id;
    that.setData({
      rigId: l_id,
    })
  },
  //跳转详情界面
  particulars:function(e){

  }
})

wxss界面:

.header{
  display: flex;
  background-color: rgba(219, 219, 221, 0.884);
  align-items: center;
  height: 60rpx;
}
.active{
  color: red;
}
.header .headerClass{
  color: red;
  margin-left: 20rpx;
}
.header .headerClass,
.header .headerPin{
  font-size: 28rpx;
}
.search{
  display: flex;
  height: 46rpx;
  border-radius: 20rpx;
  margin-left: 30rpx;
  background-color:white;
  width: 70%;
}
.search text{
  color: gainsboro;
  font-family: monospace;
  font-size: 30rpx;
  line-height: 46rpx;
    
}
.search image{
  padding-left:50rpx; 
  width: 46rpx;
  height: 46rpx;
}
.main{
  display: flex;
}
.left{
  width: 25%
}
.left view{
  padding-top: 30rpx;
  text-align: center;
}
.right{
  width: 75%;  
}

.listItem2{
  display: flex;
}
.listItem .img{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  padding-top: 10rpx;
}
.listItem .img image{
  width: 80%;
  height: 80%
}
.itemTitle{
  font-size: 32rpx;
  padding-left: 20rpx;
  padding-top: 10rpx;
  color:gray;
}
.listItem .listText{
  display: flex;
  flex-direction: column;
  margin-top: 6rpx;
}
.listItem .listText view{
  display: flex;
  align-items: flex-end;
}
.listItem .listText text{
  font-size: 34rpx;
  margin-top: 10rpx;
}
.listItem .listText .money{
  color: red;
}
.listItem .listText view text{
  font-size: 28rpx;
  color :silver;
  margin-right: 60rpx;
}
.listItem .listText view button{
  background-color: red;
  color: white;
  padding-right: 8px;
  padding-left: 8px;
  padding-top: 0px;
}
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
} 
::-webkit-scrollbar-track{
  height: 20rpx;
  color: black;
}

 

 

分类:

技术点:

相关文章: