微信小程序商城毕业设计（3）产品列表和查询

最新推荐文章于 2023-09-11 19:08:19 发布

黄菊华老师

最新推荐文章于 2023-09-11 19:08:19 发布

阅读量668

点赞数 1

分类专栏：毕业设计文章标签：微信小程序商城毕业设计

本文链接：https://blog.csdn.net/u013818205/article/details/107507547

版权

毕业设计专栏收录该内容

2537 篇文章 545 订阅

订阅专栏

在这里插入图片描述
配套的后台有jsp版本、php版本、asp版本

wxml代码

<view class="container"> 

	<view class="search-bar ">
 		<input type="text" maxlength="12" placeholder="请输入关键字查询" bindinput="inputSearch"></input>
		<button   bindtap="submitSearch" >搜索</button>
  </view>

 
		<view class="filter-tab">
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
			  <text  data-findex="1" class="active">产地</text>
      </picker>
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
			  <text  data-findex="1" >产品分类</text>
      </picker>
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
			  <text  data-findex="1" >品牌</text>
      </picker>
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
			  <text  data-findex="1" >价格区间</text>
      </picker>
		</view>
 
 <!--分类产品-自动换行，每行2个产品-->
  <view class="cps">
  
    <view class="cp-item" >
      <navigator url='/pages/fenlei/yemian/01-xiangxi'>
        <image src='/img/cp01.jpg' class="cp-image"/>
        <text>产品名称01</text>
        <text>￥：25.6</text>
      </navigator>
    </view>  
    <view class="cp-item" >
      <navigator url='/pages/fenlei/yemian/01-xiangxi'>
        <image src='/img/cp01.jpg' class="cp-image"/>
        <text>产品名称02</text>
        <text>￥：25.6</text>
      </navigator>
    </view>  
    <view class="cp-item" >
      <navigator url='/pages/fenlei/yemian/01-xiangxi'>
        <image src='/img/cp01.jpg' class="cp-image"/>
        <text>产品名称03</text>
        <text>￥：25.6</text>
      </navigator>
    </view>  
  </view>
      
</view>

wxss代码

.container {
	flex: 1;
  display: flex;
  flex-direction: column;
 	box-sizing: border-box;
}

.search-bar{
	display: flex;
  flex: 1;
	border-radius: 6rpx;
	padding: 20rpx;
	border-bottom: 1rpx solid #ddd;
	z-index: 13;
	background: #f9f9f9;
  }
.search-bar button{
	background: #f7982a;
	color: #fff;
	line-height: 72rpx;
	height: 72rpx;
	font-size: 30rpx;
	border-radius: 6rpx;
}
.search-bar input{
	flex: 1;
	height: 72rpx;
	line-height: 72rpx;
	padding: 0 10rpx;
	background: #fff;
}




.filter-tab{
	display: flex;
	width: 100%;
	line-height: 80rpx;
	border-bottom: 1rpx solid #ddd;
	position: relative;
	z-index: 2;
	background: #fff;
}
.filter-tab picker{ margin-left: 20rpx; padding-left: 20rpx;}
.filter-tab text{
	flex: 1;
	text-align: center;
}
.filter-tab text:after{
	content: '';
	display: inline-block;
	vertical-align: 4rpx;
	width: 0;
	height: 0;
	border-left: 12rpx solid transparent;
	border-right: 12rpx solid transparent;
	border-top: 12rpx solid #bbb;
	margin-left: 8rpx;
}
.filter-tab text.active{
	color: #f7982a;
}
.filter-tab:not(.sort-tab) text.active:after{
	border-top: 0;
	border-bottom: 12rpx solid #f7982a;
}
.filter-tab.sort-tab text.active:after{
	border-top: 12rpx solid #f7982a;
}

.picker{
    padding: 13px;
    background-color: #FFFFFF;
}



/*1行2列,自动换行*/
.cps {
  display: flex;
  flex-wrap:  wrap;  /*自动换行*/
}
.cp-item {
  width: 48%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5rpx;
}
.cp-item navigator{
  display: flex; 
  flex-direction:  column;
}
.cp-image {
  width: 330rpx;
  height: 330rpx;
}

.cp-item text {
  padding-top: 10rpx;
  font-size: 25rpx; 
  text-align: center;
  width: 100%;
}