小程序-搜索商品-历史记录 有并清除-根据销量-价格筛选过滤

搜索商品

<view class="container">

<view wx:if="{{$search$show==1}}" class="content">

<view class="search">

<view class="serch_content">

<i class="iconfont icon-search" />

<input type="text" name="search_input" bindinput="$search$searchInput" class="search_input" focus="true" value="{{$search$search_input_value}}" confirm-type="search" placeholder="搜索商品" />

<i wx:if="{{$search$search_input_value!=‘‘}}" bindtap="$search$delText" class="iconfont icon-del" />

</view>

<button class="btn btn_cancel" bindtap="$search$goBack" wx:if="{{$search$search_input_value==‘‘}}" data-wpygoback-a="">取消</button>

<button class="btn btn_search" bindtap="$search$search" wx:else data-wpysearch-a="">搜索</button>

</view>

</view>

<view class="bar" wx:if="{{list.length>0||skuval !==‘‘}}">

<view class="filter">

<view class="nav {{$filterBar$currentType==‘zonghe‘ ? ‘nav_active‘ : ‘‘}}" data-current="zonghe" bindtap="$filterBar$orderBy">综合</view>

<view class="nav {{$filterBar$currentType==‘sale‘ ? ‘nav_active‘ : ‘‘}}" data-current="sale" bindtap="$filterBar$orderBy">销量</view>

<view class="grid nav">

<view class="price {{$filterBar$currentType==‘price‘ ? ‘nav_active‘ : ‘‘}}" data-current="price" catchtap="$filterBar$orderBy">价格</view>

<view>

<view class="arrow_up {{$filterBar$arrowType==‘desc‘ ? ‘arrow_up_red‘ : ‘arrow_up_gray‘}}" />

<!-- 向下的三角形 -->

<view class="arrow_down {{$filterBar$arrowType==‘asc‘ ? ‘arrow_down_red‘ : ‘arrow_down_gray‘}} " />

</view>

</view>

<view class="nav" bindtap="$filterBar$filterSearch">筛选

<i class="iconfont icon-filter" />

</view>

</view>

<!--筛选测栏-->

<view wx:if="{{$filterBar$filterSlider$show}}">

<view class="filter-slider">

<view class="block">

<view class="title">尺码</view>

<view class="item_box">

<view class="item" data-sku="XS" catchtap="$filterBar$filterSlider$selSKU">XS</view>

<view class="item" data-sku="S" catchtap="$filterBar$filterSlider$selSKU">S</view>

<view class="item" data-sku="M" catchtap="$filterBar$filterSlider$selSKU">M</view>

<view class="item" data-sku="L" catchtap="$filterBar$filterSlider$selSKU">L</view>

<view class="item" data-sku="XL" catchtap="$filterBar$filterSlider$selSKU">XL</view>

<view class="item" data-sku="XXL" catchtap="$filterBar$filterSlider$selSKU">XXL</view>

</view>

</view>

<view class="btn_group">

<view class="btn_left_box">

<view class="button type_empity">重置</view>

</view>

<view class="btn_right_box">

<view class="button type_yellow" bindtap="$filterBar$filterSlider$SearchFilter">确认</view>

</view>

</view>

</view>

<view class="modal-overlay modal-overlay-visible" bindtap="$filterBar$filterSlider$close" data-wpyclose-a="" />

</view>

</view>

<view wx:if="{{list.length>0}}">

<!--矩阵商品列表模块-->

<scroll-view scroll-y="true" class="swiper-item-box">

<view class="shop_item">

<navigator class="list" wx:for="{{$shopGridList$list}}" wx:key="item" url="/pages/goods_detail?id={{item.id}}&purchasetype={{$shopGridList$purchasetype}}&special={{$shopGridList$special}}">

<view class="image_box">

<image src="{{item.thumLogo}}" />

</view>

<view class="goods">

<view class="product_name" wx:if="{{$shopGridList$showTitle}}">{{item.name}}</view>

<view class="product_info">

<view class="price">￥{{item.price}}</view>

<view class="cost_price">￥{{item.marketPrice}}</view>

<view class="sale_num">销量{{item.saleCount}}件</view>

</view>

</view>

</navigator>

</view>

</scroll-view>

<!--加载更多时动画-->

<view class="loadMoreGif" wx:if="{{$bottomLoadMore$show}}">

<image src="../images/loadding.gif" />

<text>{{$bottomLoadMore$message}}</text>

</view>

<!--暂无数据显示-->

<view class="empty-placeholder row-center" wx:if="{{$placeholder$show}}">

<image class="icon-xl" src="../images/empty.png" />

<view class="txt">{{$placeholder$message}}</view>

</view>

</view>

<view class="history {{show?‘‘:‘hidden‘}}" wx:else>

<view class="doc">历史记录</view>

<view class="lable">

<view wx:for="{{keywordhisList}}" wx:key="item" catchtap="selHisKeyWord" data-id="{{item.id}}">

<view class="child {{item.sel==‘1‘ ?‘active‘:‘‘}}">{{item.keyword}}</view>

</view>

</view>

<view class="btn_box">

<view class="button type_empity" catchtap="clearHis">清除历史记录</view>

</view>

</view>

</view>

css

.history {

padding: 20px 27px;

}

.doc {

color: #999;

font-size: 26rpx;

}

.lable {

margin-top: 20rpx;

display: flex;

flex-wrap: wrap;

align-items: center;

margin-left: -20rpx;

}

.lable .child {

background: #dedede;

padding: 10rpx 20rpx;

border-radius: 300rpx;

margin-left: 20rpx;

font-size: 26rpx;

margin-top: 5rpx;

color: #000;

}

.btn_box {

width: 377rpx;

margin: 0 auto;

padding-top: 88rpx;

}

.btn_box .button {

color: #999;

}

.active {

border: 1px solid #f23737;

color: #f23737;

}

.content {

padding: 10rpx;

}

.search {

align-items: center;

display: flex;

margin: 0 auto;

width: 680rpx;

}

.search .serch_content {

display: flex;

align-items: center;

border-radius: 300rpx;

color: #333;

width: 560rpx;

background: #efefef;

padding: 5rpx 12rpx;

height: 65rpx;

}

.search .serch_content .search_input {

font-size: 28rpx;

width: 100%;

}

.search .icon-search {

font-size: 40rpx;

}

.search .btn {

width: 120rpx;

height: 65rpx;

font-size: 28rpx;

line-height: 65rpx;

margin-left: 20rpx;

padding-left: 5rpx;

padding-right: 5rpx;

}

.search .btn_search {

color: #fff;

background: #e2413c;

}

.search .icon-del {

height: 60rpx;

line-height: 60rpx;

width: 60rpx;

font-size: 40rpx;

}

.empty-placeholder {

margin-top: 150rpx;

width: 100%;

text-align: center;

}

.empty-placeholder text {

color: #666;

font-size: 40rpx;

margin-left: 30rpx;

}

.icon-xl {

width: 140rpx;

height: 148rpx;

display: block;

margin: 0 auto;

}

.txt {

font-size: 26rpx;

color: #888888;

margin-top: 36rpx;

}

.loadMoreGif {

margin: 15rpx auto;

width: 220rpx;

display: flex;

justify-content: center;

align-items: center;

}

.loadMoreGif text {

font-size: 30rpx;

color: #999;

margin-left: 10rpx;

}

.loadMoreGif image {

width: 30rpx;

height: 30rpx;

}

.shop_item {

padding: 0rpx 15rpx;

background: #f7f7f7;

display: flex;

flex-wrap: wrap;

padding-bottom: 30rpx;

}

.list:nth-child(odd) {

margin-right: 10rpx;

}

.list {

background: #fff;

width: 355rpx;

margin-top: 15rpx;

}

.list .image_box image {

width: 100%;

height: 345rpx;

}

.list .product_name {

color: #1a1a1a;

font-size: 28rpx;

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

word-break: break-all;

}

.list .price {

color: #de0000;

font-size: 35rpx;

font-weight: 600;

}

.list .cost_price {

color: #666666;

font-size: 24rpx;

text-decoration: line-through;

font-weight: 600;

}

.list .sale_num {

color: #666666;

font-size: 22rpx;

}

.list .goods {

padding: 15rpx 12rpx;

}

.list .product_info {

padding-top: 20rpx;

display: flex;

align-items: flex-end;

}

.list .cost_price {

padding-left: 20rpx;

}

.list .sale_num {

padding-left: 20rpx;

}

@import "./filterSlider.wxss";

.filter {

display: flex;

align-items: center;

justify-content: space-between;

background: #fff;

}

.filter .nav {

color: #000000;

font-size: 26rpx;

padding: 12px 20px;

}

.filter .nav_active {

color: #f03939;

}

.filter .icon-filter {

font-size: 26rpx;

color: #666;

margin-left: 5rpx;

}

.price {

color: #000000;

font-size: 26rpx;

}

.grid {

display: flex;

align-items: center;

}

/*向上*/

.arrow_up_red {

border-color: transparent transparent #f03939;

}

.arrow_down_red {

border-color: #f03939 transparent transparent;

}

.arrow_up_gray {

border-color: transparent transparent #ccc;

}

.arrow_down_gray {

border-color: #ccc transparent transparent;

}

.arrow_up {

width: 0;

height: 0;

border-width: 0 10rpx 10rpx;

border-style: solid;

margin: 9rpx 10rpx;

position: relative;

}

/*向下*/

.arrow_down {

width: 0;

height: 0;

border-width: 10rpx 10rpx 0;

border-style: solid;

/*灰 透明 透明 */

margin: 9rpx 10rpx;

position: relative;

}

.filter-slider {

position: fixed;

top: 0;

right: 0;

height: 100%;

width: 600rpx;

z-index: 106003;

background: #ffffff;

}

.block {

font-weight: 600;

color: #000;

margin-top: 30rpx;

padding-left: 30rpx;

}

.item_box {

display: flex;

align-items: center;

flex-wrap: wrap;

margin-left: -30rpx;

margin-top: 30rpx;

padding-bottom: 30rpx;

border-bottom: 1px solid #efefef;

}

.item_box .item {

position: relative;

margin-left: 30rpx;

margin-top: 20rpx;

text-align: center;

border: 1px solid #c6c6c6;

border-radius: 5rpx;

width: 205rpx;

padding: 16rpx 0rpx;

font-size: 24rpx;

color: #2c2c2c;

}

.item_box .active {

border: 1px solid #f23737;

color: #f23737;

}

.item_box .icon-bottom-check {

position: absolute;

bottom: -4rpx;

right: 0;

color: #f23737;

font-size: 24rpx;

}

.btn_group {

display: flex;

align-items: center;

position: fixed;

bottom: 10rpx;

width: 100%;

}

.btn_group .button {

height: 85rpx;

line-height: 85rpx;

text-align: center;

margin: 0 auto;

width: 100%;

-moz-border-radius: 5rpx;

-webkit-border-radius: 5rpx;

border-radius: 5rpx;

}

.btn_group .btn_left_box {

width: 280rpx;

padding: 0rpx 10rpx;

}

.btn_group .btn_right_box {

width: 280rpx;

padding: 0rpx 10rpx;

}

/*遮罩层*/

.modal-overlay.modal-overlay-visible {

opacity: 0.4;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: #000;

z-index: 10600;

transition-duration: 400ms;

}

原文地址：https://www.cnblogs.com/wen-/p/12148260.html

时间： 2024-08-28 13:25:48

小程序-搜索商品-历史记录 有并清除-根据销量-价格筛选过滤的相关文章

微信小程序 —搜索框

wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

微信小程序--搜索关键词高亮

代码地址如下:http://www.demodashi.com/demo/14249.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现搜索关键词高亮 2.案例目录结构 二.程序实现具体步骤 1.index.wxml代码 <!--index.wxml--> <view class="container"

微信小程序搜索排名怎么优化

微信小程序搜索排名怎么优化?小程序的发展,让众多在PC互联网时代转型受阻的企业看到了希望.大家都想利用小程序来发展线上渠道,但是小程序是如何进行搜索排名的呢?可能大家都不太了解,现在小程序开发公司多享科技为大家讲述一下. 1.小程序排名的名字(标题) 不少对网站排名seo有一定了解的都应该知道,网页排名中国有一个很重要的因素就是网页标题怎么书写.同理,小出现排名中标题的书写同样很重要.并且小程序标题在同一个平台(微信.支付宝)中具有唯一性,先注册先得哦. 2.小程序的关键词 小程序关键词设置需要

微信小程序之商品发布+编辑功能（多图片上传功能）

小程序的商品发布页面:功能有多图片上传 遇到的问题记录一下: 1.uploadFile成功之后返回的参数是json字符串,一定要用JSON.parse转换为object格式 2.因为商品发布和编辑都是在同一个页面,因为异步的问题,在编辑页获取商品类别经常失败,所以这里在获取类别成功之后再获取商品详情 3.判断两位小数正则:/^\d+(.\d{1,2})?$/ 4.使用picker一些注意的地方: <picker name="category" mode="selecto

微信小程序搜索框代码组件

search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm=&

微信小程序结合后台数据管理实现商品数据的动态展示、维护

微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通过小程序的请求Web API 平台获取JSON数据在小程序界面上进行动态展示. 1.整体性的架构设计 我们整体性的架构设计,包含一个Web管理后台.一个Web API统一接口层.当然还有数据库什么,另外还有一个小程序客户端.整个架构体系还是以我之前随笔介绍的<整合微信小程序的Web API接口层的架

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

小程序开发运营必看：微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

TODO：小程序的使用体验

2017.01.09小程序如期而至,话说十年前的今天2007.01.09是第一代iPhone发布日期. 清晨朋友圈发了一张小程序的截图,很多朋友问用什么版本的微信才有小程序,我怎么没有小程序?如果你有关注微信开发相关的公众号就会收到小程序的推送的文章了.你需要将微信更新至iOS6.5.3版本或Android6.5.3版本,其次,你得尝试使用一个小程序.你就可以在微信的"发现"看到"小程序"了. 很多朋友说我有没有用过小程序,从什么地方获取到小程序呢? 1. 线下二维