防采集标记,黄菊华老师作品,盗版必究
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;
}