微信小程序 模仿拼多多搜索页

效果看拼多多的搜索页，先上张静态图

wxml

<!-- 搜索区 -->
<view class='search-box'>
  <icon class='iconfont icon-xiaokuku'></icon>
  <text>{{searchText}}</text>
</view>
<!-- 内容区 -->
<view class='con-wrapper'>
  <!-- 左侧 -->
  <scroll-view scroll-y scroll-top="{{scrollTop}}" scroll-with-animation class='con-wrap-boxLeft' style='height:{{scrHeight}}'>
    <view wx:for="{{searchTitle}}" id='{{index}}' class='con-wrap-boxLeft-item {{index==currentId ? "con-wrap-boxLeft-active" : ""}}' bindtap='leftClassifyTap'>
    <text id='{{index}}' class='con-wrap-boxLeft-itemTwo {{index==currentId ? "con-wrap-boxLeft-activeTwo" : ""}}' catchtap='leftClassifyTap'>{{item}}</text>
    </view>
  </scroll-view>
  <!-- 右侧 -->
  <scroll-view scroll-y scroll-into-view="{{scView}}" scroll-with-animation bindscroll='rigConScr' bindscrolltolower='scrLower' lower-threshold='20px' class='con-wrap-boxRight' style='height:{{scrHeight}}'>
    <view class='con-wrap-boxRight-item' wx:for="{{searchContent}}" id='c{{index}}'>
      <text class='left-title'>{{item.title}}</text>
      <navigator url='../checkAll/checkAll?datas={{item.title}}' class='rig'>
        <text >查看全部</text>
        <icon class='iconfont icon-chaoguo'></icon>
      </navigator>
      <view class='con-wrap-boxRight-classify'>
        <view class='classify' wx:for="{{item.content}}" wx:for-item="items">
          <icon class='iconfont {{items.ic}}'></icon>
          <view class='classify-font'>{{items.icname}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss

/* 搜索区 */
.search-box {
  width: 710rpx;
  height: 60rpx;
  margin: 0 20rpx 0 20rpx;
  padding: 0rpx 0rpx 10rpx 0rpx;
  border-radius: 16rpx;
  font-size: 26rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #efefef;
}
.search-box .icon-xiaokuku {
  color: #afafaf;
  padding-right: 10rpx;
}
.search-box text {
  color: #949494;
}
/* 内容区 */
.con-wrapper {
  border-top: 2rpx solid #e5e5e5;
  margin-top: 20rpx;
  width: 100%;
  font-size: 30rpx;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.con-wrap-boxLeft {
  position: fixed;
  width: 186rpx;
  background-color: #f8f8f8;
}
.con-wrap-boxLeft-item {
  width: 186rpx;
  height: 110rpx;
  line-height: 110rpx;
  text-align: center;
}
.con-wrap-boxLeft-active {
  background-color: #fff;
  color: red;
}
.con-wrap-boxLeft-itemTwo {
  display: inline-block;
  width: 186rpx;
  height: 56rpx;
  line-height: 56rpx;
  margin: 27rpx 0 27rpx 0;
}
.con-wrap-boxLeft-activeTwo {
  border-left: 8rpx solid red;
}
.con-wrap-boxRight {
  margin-left: 186rpx;
  width: 564rpx;
}
.con-wrap-boxRight-item {
  position: relative;
  padding-top: 15rpx;
}
.rig {
  position: absolute;
  right: 24rpx;
  top: 13rpx;
  color: #929292;
  font-size: 30rpx;
}
.icon-chaoguo {
  margin-left: 10rpx;
}
.left-title {
  width: 80rpx;
  height: 100rpx;
  line-height: 80rpx;
  margin: 26rpx;
}
.con-wrap-boxRight-classify {
  padding-left: 46rpx;
  padding-top: 30rpx;
}
.classify {
  display: inline-block;
  width: 166rpx;
  height: 154rpx;
  text-align: center;
}
.classify .iconfont {
  font-size: 70rpx;
}
.classify-font {
  font-size: 26rpx;
  padding-top: 10rpx;
}

js

var searchTitle = ['女装','鞋包','母婴','男装','内衣','食品','百货','美女','手机','电器','家纺','家具','电脑','充值'];

var searchContent = [
  {
    title: '女装',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '鞋包',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '母婴',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '男装',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '内衣',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '食品',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '百货',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '美女',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '手机',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '电器',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '家纺',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '家具',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '电脑',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  },
  {
    title: '充值',
    content: [
      { ic: 'icon-naozhong', icname: '限时秒杀' },
      { ic: 'icon-yagaoyashua', icname: '每日清仓' },
      { ic: 'icon-chaoguo', icname: '多多矿场' },
      { ic: 'icon-shucai', icname: '一分抽奖' },
      { ic: 'icon-diaodai', icname: '食品超市' },
      { ic: 'icon-shejishi2', icname: '时尚穿搭' },
      { ic: 'icon-xiaokuku', icname: '天天红包' },
      { ic: 'icon-tangguo1', icname: '电器城' },
      { ic: 'icon-diaodai', icname: '食品超市' }
    ]
  }
];

Page({
  /**
   * 页面的初始数据
   */
  data: {
    searchText: '蓝牙耳机迷你',
    searchTitle: searchTitle,
    searchContent: searchContent,
    scrHeig: '1000rpx',
    currentId: 0,
    scrollTop: '0',
    scView: 'c0'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var ratio = wx.getSystemInfoSync().windowWidth/750;
    this.setData({
      scrHeight: wx.getSystemInfoSync().windowHeight/ratio-60-32+'rpx'
    }) 
  },
  leftClassifyTap: function (e) {
    var curId = e.target.id;
    if (curId < 5){
      this.setData({
        currentId: curId,
        scrollTop: '0',
        scView: 'c' + curId
      })
    }else{
      this.setData({
        currentId: curId,
        scrollTop: [0.5 + (curId - 5)] * 55,
        scView: 'c' + curId
      })
    }
  },
  rigConScr: function (e) {
    var that = this;
    var query = wx.createSelectorQuery();
    query.selectAll('.con-wrap-boxRight-item').boundingClientRect(function(res){
      res.forEach(function(item){
        if (item.top > 0 && item.top < 150) {
          var curId = item.id.substr(1);
          if (curId < 5) {
            that.setData({
              currentId: curId,
              scrollTop: '0'
            })
          } else {
            that.setData({
              currentId: curId,
              scrollTop: [0.5 + (curId - 5)] * 55
            })
          }
        }
      })
    }).exec();
  },
  scrLower: function () {
    var curId = this.data.searchTitle.length - 1;
    this.setData({
      currentId: curId,
      scrollTop: [0.5 + (curId - 5)] * 55
    })
  }