• wxml

<view class="page__bd">
    <view class="weui-search-bar">
        <view class="weui-search-bar__form">
            <view class="weui-search-bar__box">
                <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                <input type="text" class="weui-search-bar__input" placeholder="请输入产品型号" value="{{inputVal}}" focus="{{inputShowed}}" bindblur="blurChoice" bindinput="inputTyping" bindconfirm="searchShow" />
                <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                    <icon type="clear" size="14"></icon>
                </view>
            </view>
            <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                <icon class="weui-icon-search" type="search" size="14"></icon>
                <view class="weui-search-bar__text">请输入产品型号</view>
            </label>
        </view>
        <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    </view>
    <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
            <view wx:for="{{searchList}}" class="weui-cell__bd" data-index="{{index}}" bindtap="searchConfirm">
                <view>{{item.shortName}}</view>
            </view>

    </view>
</view>

<view class="page-head element-ctrl">
  <view bindtap="openCategory" class="chioce-item" data-item="1" category-id="{{curType}}">
    {{category}}
    <image style="width:50rpx;height:50rpx;" class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
  </view>
  <view bindtap="openCategory" class="chioce-item" data-item="2"  model-id="{{curModel}}">
    {{modelX}}
    <image style="width:50rpx;height:50rpx;" class="icon-chioce" src="{{!isstart2?openimg: offimg}}"></image>
  </view>
</view>
<view>
  <!-- 所有类 -->
  <view class="sorting-lits{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
  <view wx:for="{{CategoryList}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-category" wx:key="userInfoListId" >{{item.name}}</view>
    <!-- <view wx:for="{{CategoryList}}" bindtap="PickCategory" type-index="{{index}}">{{item.name}}</view> -->
  </view>
</view>
<view>
  <!-- 产品 -->
  <view class="sorting-lits{{!isstart2?' chioce-list-hide':' chioce-list-show'}}">
  <view wx:for="{{curChooseModel}}" catchtap="onclicks2" data-index="{{index}}" class="sorting-item" hover-class="click-category" wx:key="userInfoListId" >{{item.name}}</view>
    <!-- <view wx:for="{{CategoryList}}" bindtap="PickCategory" type-index="{{index}}">{{item.name}}</view> -->
  </view>
</view>
<!--产品信息展示区域-->
<view class="element-ctrl">
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">产品信息</view>
    <view class="table-cell cell-right">描述</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">型号</view>
    <view class="table-cell cell-right">{{curShowModel.shortName}}</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">长 cm</view>
    <view class="table-cell cell-right">{{curShowModel.length}}</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">宽 cm</view>
    <view class="table-cell cell-right">{{curShowModel.width}}</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">高 cm</view>
    <view class="table-cell cell-right">{{curShowModel.height}}</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">容积 m<sup>3</sup></view>
    <view class="table-cell cell-right">{{curShowModel.volumn}}</view>
  </view>
  <view class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">是否控温?</view>
    <view class="table-cell cell-right">{{curShowModel.tem_ctrl?"是":"否"}}</view>
  </view>
  <view wx:if="{{curShowModel.tem_ctrl==1}}" class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">控温下限℃</view>
    <view class="table-cell cell-right">{{curShowModel.tem_ctrl_low}}</view>
  </view>
  <view wx:if="{{curShowModel.tem_ctrl==1}}" class="page-head" hover-class="click-category">
    <view class="table-cell cell-left">控温上限℃</view>
    <view class="table-cell cell-right">{{curShowModel.tem_ctrl_high}}</view>
  </view>
</view>

<view class="element-ctrl">
  <view>说明：</view>
  <text class="productSummary" space="emsp">  {{curShowModel.summary}}</text>
</view>

<view class="element-ctrl">
  <image src="{{curShowModel.pic_addr}}"></image>
</view>

• js

Page({
  data: {
    inputShowed: false,
    inputVal: "",
    category:"类别选择",
    modelX:"型号选择",
    curType:0,
    curModel:0,
    searchList: [{ id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, width: 60, height: 180, volumn: 600, tem_ctrl: 0, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }],
    CategoryList:[
      {id:"ai6",name:"AI600系列"},
      {id:"se8",name:"SE800系列"},
      {id:"rc2",name:"RC2000系列"},
      {id:"rc3",name:"RC3000系列"},
    ],
    allProducts:
      {
        "ai6": [
          {type_id:"ai6", id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          {type_id: "ai6", id: 1, name: "AI610信息试剂药剂管理柜", shortName: "AI610", length: 60, width: 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          { type_id: "ai6", id: 2, name: "AI620信息试剂药剂管理柜", shortName: "AI620", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }
        ],
        "se8": [
          { type_id: "se8", id: 0, name: "SE800信息试剂药剂管理柜", shortName: "SE800", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          { type_id: "se8", id: 1, name: "SE810信息试剂药剂管理柜", shortName: "SE810", length: 60, width: 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          { type_id: "se8", id: 2, name: "SE820信息试剂药剂管理柜", shortName: "SE820", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" }
        ],
        "rc2": [
          { type_id: "rc2", id: 0, name: "RC2000信息试剂药剂管理柜", shortName: "RC2000", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          { type_id: "rc2", id: 1, name: "RC2000S信息试剂药剂管理柜", shortName: "RC2000S", length: 60, width: 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
        ],
        "rc3": [
          { type_id: "rc3", id: 0, name: "RC3000信息试剂药剂管理柜", shortName: "RC3000", length: 60, width: 60, height: 180, volumn: 500, tem_ctrl: 0, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },
          { type_id: "rc3", id: 1, name: "RC3000S信息试剂药剂管理柜", shortName: "RC3000S", length: 60, width: 60, height: 180, volumn: 501, tem_ctrl: 1, tem_ctrl_low: -4, tem_ctrl_high: 20, summary: "产品简介、说明...", pic_addr: "/images/product/AI620.png" },

        ]
      },
    curChooseModel:[],
    curShowModel: { id: 0, name: "AI600信息试剂药剂管理柜", shortName: "AI600", length: 60, width: 60, height: 180, volumn: 600, tem_ctrl: 0, summary: "产品简介、说明...", pic_addr:"/images/product/AI620.png"},
    isstart: false,
    isstart2:false,
    openimg: "/images/down_arrow.jpg",
    offimg: "/images/up_arrow.jpg"
  },
  openCategory: function (e) {
    switch (e.currentTarget.dataset.item) {
      case "1":
        if (this.data.isstart) {
          this.setData({
            isstart: false,
          });
        }
        else {
          this.setData({
            isstart2: false,
            isstart: true,
          });
        }
        break;
      case "2":
        if (this.data.isstart2) {
          this.setData({
            isstart2:false,
          })
        }
        else {
          this.setData({
            isstart:false,
            isstart2:true,
          })
        }
    }
  },
  onclicks1: function (e) {
    var index = e.currentTarget.dataset.index;
    let name = this.data.CategoryList[index].name;
    this.setData({
      isstart: false,
      isfinish: false,
      isdates: false,
      //start: this.data.CategoryList[index].name,
      category:this.data.CategoryList[index].name,
      curType:this.data.CategoryList[index].id,
      curChooseModel: this.data.allProducts[this.data.CategoryList[index].id]
    })
  },
  onclicks2: function (e) {
    var index = e.currentTarget.dataset.index;
    let name = this.data.curChooseModel[index].name;
    this.setData({
      isstart2: false,
      isfinish: false,
      isdates: false,
      modelX: this.data.curChooseModel[index].shortName,
      curModel: this.data.curChooseModel[index].id,
      curShowModel:this.data.curChooseModel[index]
    })
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (event) {
    this.setData({
      inputVal: event.detail.value
    });
    var value = event.detail.value;
    var reg = RegExp(value, "i");
    var matchList = [];
    for (var key in this.data.allProducts) {
      for (var i = 0; i < this.data.allProducts[key].length; i++) {
        if (reg.test(this.data.allProducts[key][i]["name"])) {
          matchList.push(this.data.allProducts[key][i])
        }
      }
    }
    this.setData({ searchList: matchList });
  },
  blurChoice:function (event) {
  },
  searchShow: function (event) {
    var value = event.detail.value;
    var reg = RegExp(value,"i");
    var matchList = [];
    for(var key in this.data.allProducts){
      for(var i=0;i<this.data.allProducts[key].length;i++){
        if(reg.test(this.data.allProducts[key][i]["name"])){
          matchList.push(this.data.allProducts[key][i])
        }
      }
    }
    this.setData({searchList:matchList});
  },
  searchConfirm:function (event) {
    var index = event.currentTarget.dataset.index;
    let name = this.data.searchList[index].name;
    this.setData({
      isstart2: false,
      isfinish: false,
      isdates: false,
      modelX: this.data.searchList[index].shortName,
      curModel: this.data.searchList[index].id,
      curShowModel: this.data.searchList[index],
      searchList:[],
      inputVal: this.data.searchList[index].shortName
    })

  }
})

微信小程序开发学习记录-源码分享