基于微信小程序的网上图书商城 源代码和毕业设计（2）产品列表和查询

防采集标记,黄菊华老师作品，盗版必究

wxml代码

<form bindsubmit='chaxun'>

  <view class='search-bar'>
    <input type='text' maxlength='12' placeholder='请输入关键字' name="neirong" />
    <button form-type='submit'>查询</button>
  </view>

<view class='filter-tab'>
  <picker bindchange='p1' name="pic1" value='{{index}}' range='{{navList}}' range-key='name'>
   <text>分类：{{fenlei}}</text>
  </picker>
  
  <picker bindchange='p1' name="pic1" value='{{index}}' range='{{navList}}' range-key='name' wx:if="{{false}}">
   <text>品牌</text>
  </picker>
</view>

 <scroll-view scroll-y style='height:{{winHeight-80}}px' >
  <view class='zuixin'>
    <block wx:for="{{zuixins}}" wx:key="*this">
      <navigator url='/pages/chanpin/xiangxi?cpid={{item.cp_id}}&cpmc={{item.cp_mingcheng}}' class='zuixin-item'>
        <image src='{{item.cp_tupian}}' mode='widthFix' class='zuixin-img'></image>
        <text class='zuixin-mc'>{{item.cp_mingcheng}}</text>
        <view>
          <text class='zuixin-jiage0'>¥</text>
          <text class='zuixin-jiage1'>{{item.jiage}}</text>
          <text class='zuixin-jiage2'>536人付款</text>
        </view>
      </navigator>
    </block>
  </view>
  </scroll-view>
</form>

wxss代码

 .search-bar{
   display: flex;
   background-color: #f2f2f2;
   border-bottom: 1px solid solid;
   padding: 5px;
 }
 .search-bar input{
   height: 35px;
   line-height: 35px;
   background: white;
     flex-grow: 1;

 }
.search-bar button{

  background:  orange;
  color: white;
  height: 35px;
  line-height: 35px; 
}
 /*条件筛选*/
.filter-tab{
  display: flex;
  width: 100%;
  line-height: 35px;
  border-bottom: 1px solid gainsboro;
  position: relative;
}
.filter-tab picker{
  margin-left: 10px;
}
.filter-tab text:after{
  content: '';
   display: inline-block;
   width: 0; height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid gray;
   margin-left: 6px;
}


 /*产品列表*/
 
.zuixin {
  display: flex;
  flex-wrap: wrap;
}

.zuixin-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  border-bottom: 1px dotted gainsboro;
}

.zuixin-img {
  width: 100%;
  border: 1px solid #fcfafa;
  border-radius: 5px;
  box-shadow: 0px 2px 2px gainsboro;
  padding: 5px;
  box-sizing: border-box;
}

.zuixin-mc {
  font-size: 12px;
  padding: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zuixin-jiage0 {
  font-size: 10px;
  padding: 3px;
  color: red;
}

.zuixin-jiage1 {
  font-size: 14px;
  padding: 3px;
  color: red;
}

.zuixin-jiage2 {
  font-size: 11px;
  padding: 3px;
  color: gray;
}