微信小程序模仿拼多多首页中间内容区导航条

矫情吗；* 2022-04-14 02:47 333阅读 0赞

wxml

<view class='content-scroll-box'>
        <scroll-view class='content-scroll' scroll-x bindscroll="conScroll" lower-threshold="50rpx" bindscrolltolower="conScrLower" upper-threshold="50rpx" bindscrolltoupper="conScrUpper" scroll-with-animation>
          <block wx:for="{
       {contentIcons}}">
            <view class='con-sc-box-grup'>
              <view class='con-sc-box-item'>
                <icon class='iconfont {
       {item[0].ic}}'></icon>
                <text>{
       {item[0].icname}}</text>
              </view>
              <view class='con-sc-box-item' wx:if="{
       {!(item[1] == null)}}">
                <icon class='iconfont {
       {item[1].ic}}'></icon>
                <text>{
       {item[1].icname}}</text>
              </view>
            </view>
          </block>
        </scroll-view>
        
        
        <view class="con-sc-line-one {
       {lefOrRigOne ? 'con-sc-line-one-left' : 'con-sc-line-one-right'}}" animation="{
       {animationData}}"></view>
        <view class='con-sc-line-two' style='left:{
       {leftTwo}}'></view>
      </view>

wxss

.content-scroll-box {
      position: relative;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      border-top: 1px solid #d1d4d4; 
      border-bottom: 7px solid #f2f2f2;
      color: #707070;
      font-size: 12px;
    }
    .content-scroll {
      width: 100%;
      height: 294rpx;
      line-height: 75rpx;
    }
    .con-sc-box-grup { 
      display: inline-block;
    }
    .con-sc-box-item {
      position: relative;
      width: 148rpx;
      height: 130rpx;
      text-align: center;
      line-height: 86px;
    }
    .con-sc-box-item .iconfont {
      font-size: 48rpx !important;
      color: red;
      position: absolute;
      left: 33%;
      top: -23px;
    }
    .con-sc-line-one {
      height: 13rpx;
      width: 40rpx;
      background-color: #f45f00;
      border-radius: 5px;
      /* margin: 0 10rpx 20rpx 335rpx; */
      position: absolute;
      top: 265rpx;
      z-index: 10;
    }
    .con-sc-line-one-left {
      left: 335rpx;
    }
    .con-sc-line-one-right {
      right: 347rpx;
    }
    .con-sc-line-two {
      width: 20rpx;
      height: 13rpx;
      background-color: #dfdfdf;
      border-radius: 5px;
      /* margin-bottom: 20rpx; */
      position: absolute;
      top: 265rpx;
      left: 383rpx;
    }

这里有用到字体图标 和 wx.creatAnimation接口  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220414/18da64dc7cca418597b2a0810261bf58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70 1]: /images/20220414/e8deda622c0f4bb5901da3994e0c4b96.png