小程序产品列表页筛选纯手写静态

最新推荐文章于 2023-05-13 18:12:56 发布
最新推荐文章于 2023-05-13 18:12:56 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848576/article/details/99065370
版权

效果

在这里插入图片描述

html

结构说明：三个tab头部head为一个盒子，弹出框popup为一个盒子

<view class="goods_list">
    <!-- 搜索 -->
    <view class="search">
        <input type="text" name="search" bindconfirm='shop_search_function' confirm-type='search'
            placeholder="请输入关键词" />
        <image src="{{imgurl}}l_shousuo.png" />
    </view>

    <!-- 三个筛选 -->
    <view class="head flex">
        <view class="item flex_l {{tab==1?'active':''}}" data-tab='1' bindtap="changeTab">
            <text>默认排序</text>
            <image wx:if="{{tab!=1}}" src="{{imgurl}}l_zonghe.png" />
            <image wx:if="{{tab==1}}" src="{{imgurl}}l_zonghed.png" />
        </view>
        <view class="item flex_l {{tab==2?'active':''}}" data-tab='2' bindtap="changeTab">
            <text>拍卖状态</text>
            <image wx:if="{{tab!=2}}" src="{{imgurl}}l_zonghe.png" />
            <image wx:if="{{tab==2}}" src="{{imgurl}}l_zonghed.png" />
        </view>
        <view class="item {{tab==3?'active':''}}" data-tab='3' bindtap="changeTab">
            <text>筛选</text>
        </view>
    </view>

    <!-- 默认排序弹出框 -->
    <view class="popup" wx:if="{{tab==1&&tab1show}}">
        <view class="item flex_l {{tab1==1?'active':''}}" data-tab1="1" bindtap="selectTab1">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>默认排序</text>
        </view>
        <view class="item flex_l {{tab1==2?'active':''}}" data-tab1="2" bindtap="selectTab1">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>按拍卖时间排序</text>
        </view>
        <view class="item flex_l {{tab1==3?'active':''}}" data-tab1="3" bindtap="selectTab1">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>当前价格由高到低</text>
        </view>
        <view class="item flex_l {{tab1==4?'active':''}}" data-tab1="4" bindtap="selectTab1">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>当前价格由低到高</text>
        </view>
        <view class="item flex_l {{tab1==5?'active':''}}" data-tab1="5" bindtap="selectTab1">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>最新发布</text>
        </view>
    </view>

    <!-- 拍卖状态弹出框 -->
    <view class="popup" wx:if="{{tab==2&&tab2show}}">
        <view class="item flex_l {{tab2==1?'active':''}}" data-tab2="1" bindtap="selectTab2">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>正在进行</text>
        </view>
        <view class="item flex_l {{tab2==2?'active':''}}" data-tab2="2" bindtap="selectTab2">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>即将开始</text>
        </view>
        <view class="item flex_l {{tab2==3?'active':''}}" data-tab2="3" bindtap="selectTab2">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>已结束</text>
        </view>
        <view class="item flex_l {{tab2==4?'active':''}}" data-tab2="4" bindtap="selectTab2">
            <image class="hide" src="{{imgurl}}l_xuanzhong.png" />
            <text>流拍</text>
        </view>
    </view>

    <!-- 列表为空时 -->
    <view class="null hide">
        <image src="{{imgurl}}l-null.png" />
        <text>您还没有收藏过圈子呢，快去看看吧</text>
    </view>

    <!-- 瀑布流 -->
    <view class='pubuliu'>
        <view class='list-masonry'>
            <view class='item-masonry' wx:for="{{list}}" wx:if="{{index % 2 == 0}}">
                <image src='{{item.url}}' mode='widthFix'></image>
                <text class="title erhang">{{item.title}}</text>
                <view class="keys flex_l">
                    <text>真迹</text>
                    <text>真迹</text>
                </view>
                <view class="price">
                    起拍价<text>￥8888</text>
                </view>
                <text class="time">预计今天20:00结束</text>
            </view>
            <view class='item-masonry' wx:for="{{list}}" wx:if="{{index % 2 ==1}}">
                <image src='{{item.url}}' mode='widthFix'></image>
                <text class="title erhang">{{item.title}}</text>
                <view class="keys flex_l">
                    <text>真迹</text>
                    <text>真迹</text>
                </view>
                <view class="price">
                    起拍价<text>￥8888</text>
                </view>
                <text class="time">预计今天20:00结束</text>
            </view>
        </view>
    </view>
</view>

less

样式说明：页面布局所有盒子高度为百分比，整个页面高度为100%=搜索高+head高+弹出框popup高
弹出框popup设置透明背景色，筛选条件为其内部item，背景色为白色
弹出框popup设置相对整个页面固定定位，top值为搜索高+head高，从而实现无缝对接并有背景的效果

.goods_list {
    height: 100%;

    .search {
        height: 5%;
        margin: 1.5% 60rpx 1.5% 24rpx;
        position: relative;

        input {
            height: 100%;
            border-radius: 32rpx;
            padding-left: 85rpx;
            border: 1rpx solid rgba(153, 153, 153, 1);
        }

        image {
            width: 44rpx;
            height: 44rpx;
            position: absolute;
            left: 30rpx;
            top: 10rpx;
        }
    }



    .head {
        height: 8%;
        padding: 0 30rpx;
        font-size: 28rpx;
        color: #0C0B0B;
        border-top: 1rpx solid #E5E5E5;
        border-bottom: 1rpx solid #E5E5E5;

        .item.active {
            color: #FC5E62;
        }

        image {
            width: 12rpx;
            height: 7rpx;
            margin-left: 12rpx;
        }
    }


    .popup {
        height: 85%;
        background-color: rgba(0, 0, 0, .5);
        position: fixed;
        top: 15%;
        left: 0;
        right: 0;

        .item {
            height: 98rpx;
            background-color: #fff;
            padding-left: 30rpx;

            &.active {
                font-weight: 700;

                image {
                    display: block;
                }
            }

            image {
                width: 25rpx;
                height: 18rpx;
                margin-right: 25rpx;
            }

        }
    }


    .null {
        text-align: center;

        image {
            display: block;
            width: 393rpx;
            height: 294rpx;
            margin: 200rpx auto 30rpx;
        }

        text {
            font-size: 28rpx;
            color: rgba(153, 153, 153, 1);
        }
    }

    .pubuliu {
        padding: 0 24rpx;

        .list-masonry {
            column-count: 2;
            column-gap: 23rpx;
        }

        .item-masonry {
            background-color: #fff;
            break-inside: avoid;
            box-sizing: border-box;
            margin-bottom: 40rpx;

            image {
                width: 100%;
            }

            .title {
                margin: 15rpx 0;
            }

            .keys {
                text {
                    display: block;
                    border: 1rpx solid rgba(153, 153, 153, 1);
                    border-radius: 20rpx;
                    padding: 2rpx 15rpx;
                    margin-right: 10rpx;
                    color: #999;
                    font-size: 24rpx;
                }
            }

            .price {
                margin: 10rpx 0;
                font-size: 24rpx;

                text {
                    color: #FC5E62;
                    font-size: 30rpx;
                    margin-left: 5rpx;
                }
            }

            .time {
                font-size: 24rpx;
                color: rgba(153, 153, 153, 1);
            }
        }
    }
}

js

// pages/goods_list/goods_list.js
const app = getApp()
const request = require('../../utils/request.js')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgurl: app.globalData.pmhImgurl, //全局img路径
    imgWidth: 0, imgHeight: 0,
    id: '', // 二级分类id
    list: [
      {
        title: '案例名称1',
        url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
      },
      {
        title: '你所不知道的红酒知识2',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
      },
      {
        title: '红酒知识3',
        url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
      },
      {
        title: '案例名称4',
        url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',
      },
      {
        title: '案例名称5',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
      },

      {
        title: '案例名称6',
        url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
      },
      {
        title: '案例名称7',
        url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'
      },
      {
        title: '案例名称8',
        url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
      },
      {
        title: '案例名称9',
        url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
      }
    ],

    tab: 0, //三个tab切换   1 默认排序  2 拍卖状态  3 筛选
    tab1show: false,  //1 默认排序弹出框是否显示
    tab2show: false,  //2 拍卖状态弹出框是否显示
    tab1: 0, //tab1默认排序弹窗的值 1,2,3,4,5
    tab2: 0, //tab2拍卖状态弹窗的值 1,2,3,4
  },

  // 点击三个tab切换
  changeTab(e) {
    console.log(e.currentTarget.dataset.tab);
    let tab = e.currentTarget.dataset.tab
    this.setData({
      tab: tab
    })
    if (tab == 1) {
      this.setData({
        tab1show: !this.data.tab1show,
        tab2show: false
      })
    } else if (tab == 2) {
      this.setData({
        tab2show: !this.data.tab2show,
        tab1show: false
      })
    } else if (tab == 3) {
      this.setData({
        tab1show: false,
        tab2show: false
      })
    }
  },

  // 点击tab1默认排序弹窗的5个选项
  selectTab1(e) {
    let tab1 = e.currentTarget.dataset.tab1
    this.setData({
      tab1: tab1,
      tab1show: false
    })
  },

  // 点击tab2拍卖状态弹窗的4个选项
  selectTab2(e) {
    let tab2 = e.currentTarget.dataset.tab2
    this.setData({
      tab2: tab2,
      tab2show: false
    })
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id);
    this.setData({
      id: options.id
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
小曲曲
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
微信小程序开发中的数据筛选和搜索功能
m0_72166538的博客
03-15 218
通过定义筛选条件和筛选结果的变量，并根据用户选择的条件和输入的关键字来处理数据，我们可以实现灵活的数据筛选和搜索功能。在上面的代码中，我们在searchInput方法中更新了搜索关键字，并在searchMovies方法中使用Array的filter方法来搜索电影。当用户选择了电影类型或导演时，会触发对应的change事件，我们可以在事件处理方法中更新筛选条件，并根据筛选条件过滤电影数据。首先，在页面中添加一个搜索框和一个搜索按钮，用户可以在搜索框中输入电影名称，并点击按钮来触发搜索。
微信小程序级联筛选
08-10
需要的可已下载来看非常有用
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
10-15
主要介绍了微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能),需要的朋友可以参考下
微信小程序实现城市列表选择
12-10
本文实例为大家分享了小程序实现城市列表选择的具体代码，供大家参考，具体内容如下 实现效果预览   实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/citys" ], "window":{ "backgroundTextStyle":"light",
微信小程序demo：乡居网：条件筛选列表，tab菜单，谷歌统计
03-15
比较完整的demo了， 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序 - 筛选侧边栏 - 全选与反全选
12-30
微信小程序 - 筛选侧边栏 - 全选与反全选
微信小程序实现筛选的功能
weixin_57837567的博客
05-13 2937
在页面加载的时候，显示最原始的数据，当我们点击按钮的时候，触发筛选的功能，只显示符合条件的数据，再次点击的时候取消筛选的功能，显示原本的数据在数据的显示过程中，可以设置一个临时的数组，在筛选的时候将临时数组清空，取消筛选的时候再将数值重新赋值给临时的数组显示出来。
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
slient033的博客
11-05 4374
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
微信小程序筛选框
qq_57985179的博客
10-25 2862
不废话，直接上代码 wxml： <!-- 筛选和排序框 --> <view class="sreenBigBox"> <view class="sreenBox"> <view class="sreenItems"> <view class='sreen ' bindtap="sreenShow">筛选<image class='head {{sreenShow&&"rotating"}}' sr
微信小程序实现下拉筛选
shi450561200的博客
05-07 3287
【代码】微信小程序实现下拉筛选。
微信小程序canvas画板手写签名
03-12
通过小程序canvas原生组件方法，实现对画布的基本操作并扩展相关功能，实现在线签名功能，支持翻页、撤销、清空、生成图片，并增加田字格底图
微信小程序实现手写签字
07-30
无纸化办公，这是老板对我的要求，然而有人现场执法文件全部电子化，只有签字部分让一个搞web的人有点儿头疼，不能为了这个找个人来开发app吧于是想到了小程序，对于一个新接触小程序的人来说还是有挑战性的，因为我...
微信小程序签字板 手写板用户签名
10-26
微信小程序签字板 准备工作 1.canvas的使用 主要用到了 bindtouchstart ， bindtouchmove 两个属性，捕捉手指移动的同时，将移动前的坐标和移动后的坐标用canvas的画图api绘制出来 2.wx.createCanvasContext 这...
[小程序插件]手写签名
09-22
小程序插件-手写签名
微信小程序手写板.zip
01-20
微信小程序手写板，最终生成Base64格式，超级好用，下载即可使用
小程序的各种弹窗
热门推荐
xiaoququ的博客
08-04 3万+
//test.js Page({ popSuccessTest: function () { wx.showToast({ title: '成功提示弹窗', icon: '', //默认值是success,就算没有icon这个值，就算有其他值最终也显示success duration: 2000, //停留时间 }) }...
小程序中axios的使用
xiaoququ的博客
06-16 1万+
axios简介 Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中 axios-miniprogram-adapter axios的小程序适配器，支持微信、支付宝、钉钉、百度小程序 支持TypeScript 使用方法 npm i axios axios-miniprogram-adapter 工具->构建npm 引入 //http.js import axios from 'axios' import mpAdapter from 'axios-minipro
小程序页面跳转及返回总结
xiaoququ的博客
08-01 8935
1、跳转方式 2、wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 wx.navigateTo({ url: `/pages/circle_detail/circle_detail?id=${id}` ...
小程序 手写picker
最新发布
06-08
可以通过以下步骤实现小程序手写picker： 1. 首先，在 wxml 文件中添加 picker 组件，并绑定一个数组作为数据源。 ``` <picker mode="selector" range="{{array}}" bindchange="bindPickerChange"> <view class="picker"> {{array[index]}} </view> </picker> ``` 2. 在 js 文件中定义数组和 index 变量，并编写 bindPickerChange 方法实现选择器值改变时的回调函数。 ``` Page({ data: { array: ['苹果', '香蕉', '橘子', '梨子'], index: 0 }, bindPickerChange: function(e) { this.setData({ index: e.detail.value }) } }) ``` 3. 在 css 文件中定义选择器样式。 ``` .picker { display: flex; justify-content: center; align-items: center; height: 50px; font-size: 16px; color: #333; background-color: #f2f2f2; } ``` 这样，就可以实现一个简单的手写 picker 组件了。当用户选择不同的选项时，会触发 bindPickerChange 回调函数，可以在该函数中处理选项改变后的逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值