wxjs - 搜索兼目录导航

wxss

header, .top-bar{
  display: block;
  width: 100%;
  height: 112rpx;
}

.top-bar{
  position: fixed;
  border-bottom: 2rpx solid #c1c1c1;
}


.pMuLu {
  display: block;
  padding-left: 10rpx;
  padding-right: 20rpx;
  white-space: nowrap;
  background: rgba(243, 243, 243, .1);
  box-sizing: border-box;
}

.pMuLu view {
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
}

.pMuLu navigation-item {  
  float: left;
  height: 34rpx;

  line-height: 40rpx;
  font-size: 24rpx;
}

 

wxml

<header>
  <view class="top-bar">
    <form bindsubmit="bindSave">
      <view class="search2">
        <view class='search2_input'>
          <input name="keyword" maxlength="35" placeholder="请输入资源名称与关键词" type="text" />
        </view>
        <view class="sousuo">
          <button formType="submit" class="s_bn">
            <image src='../tp/ss.png' mode='widthFix' />
          </button>
        </view>
      </view>
    </form>

    <scroll-view scroll-x="true" class='pMuLu'>
      <view>
        <content wx:for="{{pcids}}" wx:key="index">
          <navigation-item catchtap='navigateBack' data-index="{{pcids.length - index - 1}}">{{!index?"/ ":""}}{{item.cname}} > </navigation-item>
        </content>
      </view>
    </scroll-view>
    <view></view>
    </view>
  </header>

 

wxjs

navigateBack: function(p) {
    if (0 == p.target.dataset.index) {
      return;
    }
    wx.navigateBack({
      delta: p.target.dataset.index
    });
  },
  

 

 

2