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

短命女 2022-04-13 06:12 292阅读 0赞

效果看拼多多的搜索页，先上张静态图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]

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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220413/9e6b386a879f4fe6b3bcc3eb371200b3.png