微信小程序搜索商品列表，上拉无限加载，tab切换请求不同接口，以及筛选等

最新推荐文章于 2024-04-24 16:10:54 发布

在路上_a

最新推荐文章于 2024-04-24 16:10:54 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/abc_26zm/article/details/97238548

版权

wxml

**
第一次接触小程序，有很多不足需要学习，在这里记录一下自己所遇到的问题，
// mythis.data.allProject = []，置空你所需要的数组的时候，这样是错误的，你需要 mythis.setData({ listData: [], allProject: [] })这样来置空你所需要置空的数据，或者数组，也可以改变参数的值
最后，望各位帅哥美女多多指教，Thanks♪(･ω･)ﾉ

**

## //tab切换 wxml文件，

**
<!-- 搜索 -->
<view class="Search_input_top_box">
    <view class="Search_ico_box">
        <icon class="Search_ico weui-icon-search_in-box" type="search" size="14"></icon>
    </view>
    <input class="Search_Input" focus="{{name_focus}}" placeholder='请输入搜索内容' bindinput='inputvalue' value="{{input_value}}" bindconfirm="wxSearchConfirm"></input>
    <view class="Search_btn" bindtap='search'>{{SearchText}}</view>
</view>
<view class="clearfix">
    <!-- tab切换 -->
		<view class="small_nav {{tabFixed?'small_navFix':''}}" id="tab-con">
			<scroll-view scroll-x="true" scroll-left="{{scrollLeft}}">
				<view class="small_nav_scroll">
					<view class="{{id=='0'?'cur':' '}}" data-id="0" bindtap="switchNav">综合</view>
					<view class="{{id==item.categoryId?'cur':' '}}" wx:for="{{typeList}}" wx:key="index" data-id="{{item.categoryId}}" data-index="{{index}}" bindtap="switchNav">{{item.categoryName}}</view>
				</view>
			</scroll-view>
			<!-- 筛选 -->
			<view class="animation-button" bindtap="translate">筛选</view>
			<view class="float {{isRuleTrue?'isRuleShow':'isRuleHide'}} ">
				<view class="animation-element" animation="{{animation}}">
					<view class='use '>
						<view class='iconuse'>商品价格区间</view>
						<view class="search-priceinp clearfix">
							<input type="tel" placeholder="最低价" bindinput='lowPrice' class="search-priceinp-low"></input>
							<span></span>
							<input type="tel" placeholder="最高价" bindinput='highPrice' class="search-priceinp-high"></input>
						</view>
					</view>
					<!-- 价格 -->
					<view class='use'>
						<view class='iconprice'>分类</view>
						<view class="iconList clearfix">
							<view wx:for="{{pcList}}" wx:key="{{list}}">
								<view class="listText {{_num == item.pc_id?'active':''}}" catchtap="gotoresult" data-num="{{item.pc_id}}">{{item.pc_name}}</view>
							</view>
						</view>
					</view>
					<view class='buttom'>
						<view class="animation-reset" bindtap="succHide">取消</view>
						<view class="animation-button" bindtap="successHide">完成</view>
					</view>
				</view>
			</view>
		</view>
</view>
<!-- 渲染页面 -->
<view class="commList" id="tab-con">
    <view class="commSingle">
        <view class="listBox fl" wx:for="{{listData}}" wx:key="{{list}}" bindtap="goData({{item.products_id}})">
            <image class="loevImg" src="{{item.image}}"></image>
            <view class="likeLove">
                <view class="fl loveLeft">
                    <image src=""></image>
                    <text>{{item.products_collect}}w</text>
                </view>
                <view class="fr moneyRight">
                    <text>￥{{item.products_price}}</text>
                </view>
            </view>
            <view class="introDuce">
                {{item.products_name}}
            </view>
        </view>
    </view>
    <view class='remind' wx:if="{{state==0}}">
        <view>没有更多了</view>
    </view>
</view>

js


Page({


    data: {
        inpuVal: "", //input框内值
        listarr: [], //创建数组
        SearchText: '取消', //按钮变动值
        keydown_number: 0, //检测input框内是否有内容
        input_value: "", //value值
        hostarr: [], //热门搜索接收请求存储数组  
        name_focus: true, //获取焦点
        scrollLeft: 0,
        id: "0",
        // 分页
        
        //接口需要的分页参数,页码，从1开始
        page: 1,
        
        //每次请求的条数：
        rows: 10,
        //排序方式：
        paixu: 'viewcount',
        //升序或降序：
        order: 'desc',
        //用于标识是否还有更多的状态
        state: 1,
        //用于渲染页面的数组
        arrayProject: [],
        //用于数组的追加和暂存
        // // 综合 ，所有请求的接口数据都会存入这个数组
        allProject: [],
   		//tab切换的条数
        typeList: [{
                categoryId: 1,
                categoryName: "上新"
            },
            {
                categoryId: 2,
                categoryName: "关注"
            },
            {
                categoryId: 3,
                categoryName: "价格"
            },
        ]
    },
    //监听input是否有输入，当有值的时候，更换text
    inputvalue: function(e) {
        let that = this;
        this.setData({
            inputVal: e.detail.value
        })
        if (e.detail.cursor != 0) {
            this.setData({
                SearchText: "搜索",
                keydown_number: 1
            })
        } else {
            this.setData({
                SearchText: "取消",
                keydown_number: 0
            })
        }
    },
    
    search: function(keyword) {
        // 获取input的最后的值
        var mythis = this;
        //把存放数据的数组置空，并且重新调用接口
         mythis.data.allProject = [];这样是错误的~~，很坑
      // 调用接口，需要把数组提前清空，在调用接口，
		mythis.setData({ listData: [], allProject: [], page: 1 });
        //input 最后输入的值
        var keyword = this.data.inputVal
        //接口所需要的参数
        listNum(this.data.page, this.data.rows, keyword, mythis)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // 获取上个页面传来的参数 
        //因为父级页面是一个搜索，所以我需要把接口所需要的关键字穿到子页面
        const keyword = this.options.keyword
        var mythis = this;
        //这个接口有多次调用，但是都是在不同的时候来调用当前函数
        listNum(this.data.page, this.data.rows, this.options.keyword, mythis)

    },
    // 跳转详情页
    //还没有写商品详情，暂时先把方法记录下来
   
    bindtap: function(id) {
        console.log(id)
    },


    // 分页
    /**
     * 点击加载更多时触发
     */
    loadMore: function() {
        var mythis = this;
        wx.showLoading({
            title: '玩命加载中...',
        });
        mythis.data.page = mythis.data.datas.products_list + 1;
        //点击加载更多是，调用
         listNum(this.data.page, this.data.rows, this.options.keyword, mythis);
        wx.hideLoading();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {
        // 顶部tab  置顶
        //向上滑动是调用，tab一直保持顶部
        var that = this;
        var query = wx.createSelectorQuery()
        query.select('#tab-con').boundingClientRect(function(res) {
            that.setData({
                tabScrollTop: res.top + 100 //根据实际需求加减值
            })
        }).exec()
        this.animation = wx.createAnimation()
    },
    // 筛选函数
    translate: function() {
        this.setData({
            isRuleTrue: true
        })
        this.animation.translate(-245, 0).step()
        this.setData({
            animation: this.animation.export()
        })
    },
    // 筛选分类
    ![选中元素的id](https://img-blog.csdnimg.cn/2019072510230027.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FiY18yNnpt,size_16,color_FFFFFF,t_70)
    gotoresult: function(e) {
    //获取我选中区域的id
        var pc_id = e.target.dataset.num
        this.setData({
            _num: e.target.dataset.num
        })
    },
    // 获取最低价
    lowPrice: function(e) {
        this.setData({
            min_price: e.detail.value
        })
    },
    // 获取最高价
    highPrice: function(e) {
        this.setData({
            max_price: e.detail.value
        })
    },
    // 点击完成隐藏  并调用接口
    successHide: function() {
        this.setData({
            isRuleTrue: false
        })
        this.animation.translate(0, 0).step()
        this.setData({
            animation: this.animation.export()
        })
		
        var mythis = this;
		mythis.setData({ listData: [], allProject:[], page: 1 });
        screenDate(this.data.page, this.data.rows, this.options.keyword, this.data._num, this.data.min_price, this.data.max_price, mythis)
    },
    // 点击给取消隐藏
    succHide: function() {
        this.setData({
            isRuleTrue: false
        })
        this.animation.translate(0, 0).step()
        this.setData({
            animation: this.animation.export()
        })
    },
    tryDriver: function() {
        this.setData({
            background: "#89dcf8"
        })
    },
    // 获取滚动条当前位置
    onPageScroll: function(e) {
        // 顶部tab  一直置顶
        if (e.scrollTop > this.data.tabScrollTop) {
            this.setData({
                tabFixed: true
            })
        } else {
            this.setData({
                tabFixed: false
            })
        }
    },

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

    },

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

    },

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

    },

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

    },
    //切换产品类别
    switchNav: function(e) {
        const {
            offsetLeft
        } = e.currentTarget;
        const {
            id,
            index
        } = e.currentTarget.dataset;
        var clientX = e.detail.x;
        if (this.data.id == e.currentTarget.dataset.id) {
            return false;
        }
        if (clientX < 60) {
            this.setData({
                scrollLeft: offsetLeft - 60
            });
        } else if (clientX > 330) {
            this.setData({
                scrollLeft: offsetLeft
            });
        }
        this.setData({
            id: id
        });
		var mythis = this;
		//因为是tab切换，所以每一次切换都要置空一次page，和数组，否则你的数据会一直在最底部
		mythis.setData({ listData: [], allProject: [],page:1 });
		//id  是上面data自己定义的哦，根据不同的id来调用不同接口
		//综合
		if (id == 0) {
			listNum(this.data.page, this.data.rows, this.options.keyword, mythis)
		}
        // 上新
        if (id == 1) {
            uptoDate(this.data.page, this.data.rows, this.options.keyword, mythis)
        }
        // 关注
        if (id == 2) {
            followDate(this.data.page, this.data.rows, this.options.keyword, mythis)
        }
        // 价格
        if (id == 3) {
           
            priceDate(this.data.page, this.data.rows, this.options.keyword, mythis)
        }

    },

    /**
     * 页面上拉触底事件的处理函数
     * 与点击加载更多做同样的操作
     */
    onReachBottom: function() {
        // 加载
        var mythis = this;
        wx.showLoading({
            title: '玩命加载中...',
        });
       //因为接口当中需要page，也就是所谓的第几页，，每走一次上拉，我们让page加一，
        mythis.data.page = mythis.data.page + 1;
		//上拉加载，其实就是无限加载，这里不需要清空参数，只需要重新调用一次接口就好
		// 综合
		if (mythis.data.id == 0){
			listNum(this.data.page, this.data.rows, this.options.keyword, mythis);
		}
		// 上新
		if (mythis.data.id == 1) {
			uptoDate(this.data.page, this.data.rows, this.options.keyword, mythis)
		}
		// 关注
		if (mythis.data.id == 2) {
			followDate(this.data.page, this.data.rows, this.options.keyword, mythis)
		}
		// 价格
		if (mythis.data.id == 3) {
			priceDate(this.data.page, this.data.rows, this.options.keyword, mythis)
		}
        wx.hideLoading();

    },

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

    },


})

/**
 * 页面的初始数据
 */
//   综合
function listNum(page, rows, keyword, mythis) {
    wx.request({
        url: 'url',
        data: {
            page: page,
            rows: rows,
            keyword: keyword,
            order: 1,
            search_type: 2
        },
        header: {
            'content-type': 'application/x-www-form-urlencoded'
        },
        method: 'GET',
        success: function(res) {
            //如果搜出来的结果!=true 就说明后面已经没数据可加载了，所以将state设为0
            if (res.data.datas.hasmore != true) {
                mythis.setData({
                    state: 0
                });

            } else {
                var state1 = 1;
                //如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载
                if (res.data.datas.hasmore != true)
                    var state1 = 0;
                for (var i = 0; i < res.data.datas.xxxxx.length; i++) {
                //循环 把每个对象插入数组，因为不同的接口用的是一个接口，所以我们需要置空数组的哦
                    mythis.data.allProject.push(res.data.datas.xxxxx[i]);
                }
                mythis.setData({
                    listData: mythis.data.allProject,
                    state: state1
                });
                //这是分类所以的数据，只需要拿出来，并且循环
                var pcList = res.data.datas.pc_list
                mythis.setData({
                    pcList: res.data.datas.pc_list
                });
            }

        },
        fail: function(res) {},
        complete: function(res) {},
    })
}
//多余的接口我也不写在这了，
// 上新
function uptoDate(page, rows, keyword, mythis) {
   
}
// 关注
function followDate(page, rows, keyword, mythis) {
 
}
// 价格
function priceDate(page, rows, keyword, mythis) {   
   
// 筛选
function screenDate(page, rows, keyword, _num, min_price, max_price, mythis) {
   
}
///代码需要优化的地方还有很多，希望各位大牛多多指教，谢谢

wxss

//wxss

/* 清除浮动 */

.clearfix {
    zoom: 1;
}

.clearfix:after {
    display: block;
    clear: both;
    content: '\20';
}

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* tab */

#tab-con scroll-view {
    width: 80%;
    float: left;
}

.animation-button {
    float: right;
    line-height: 2;
    width: 19%;
    margin-top: 15rpx;
    text-align: center;
    color: rgba(155, 155, 155, 1);
}

/* 搜索 */

.Search_input_top_box {
    margin-top: 12rpx;
    position: relative;
    margin-bottom: 16rpx;
}

/* 筛选 */

.isRuleShow {
    display: block;
}

.isRuleHide {
    display: none;
}

.float {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    top: 0;
    left: 0;
    /* margin-top:80rpx; */
}

.iconuse {
    margin: 70rpx 0 46rpx 20rpx;
    color: rgba(62, 53, 53, 1);
}

.iconprice {
    margin-left: 20rpx;
    margin-bottom: 23rpx;
}

.search-priceinp {
    height: 100rpx;
}

.animation-element {
    width: 596rpx;
    height: 1175rpx;
    background-color: #fff;
    border: 1px solid #f3f0f0;
    position: absolute;
    right: -490rpx;
    z-index: 99;
}

.search-priceinp-low {
    margin-left: 20rpx;
}

.search-priceinp-high {
    margin-right: 20rpx;
}

.search-priceinp-low, .search-priceinp-high {
    float: left;
    border: solid 1px #bbb;
    color: #999;
    font-size: 30rpx;
    text-align: center;
    line-height: 8rpx;
    width: 255rpx;
    height: 60rpx;
    border-radius: 8rpx !important;
    background: rgba(247, 247, 247, 1);
}

.search-priceinp span {
    float: left;
    width: 40rpx;
    height: 1rpx;
    display: inline-block;
    background: #999;
    position: relative;
    top: 25rpx;
}

.buttom {
    position: fixed;
    bottom: 0;
}

.animation-reset {
    float: left;
    line-height: 97rpx;
    width: 260rpx;
    margin: 15rpx 12rpx;
    border: 1px solid #f3f0f0;
    text-align: center;
}

.buttom .animation-button {
    float: left;
    line-height: 97rpx;
    width: 260rpx;
    height: 97rpx;
    margin: 15rpx 12rpx;
    border: 1px solid #f3f0f0;
    text-align: center;
    background: #ca493a;
    color: #fff;
}

.iconList {
    width: 596rpx;
}

.iconList .listText {
    float: left;
    width: 170rpx;
    background: rgba(247, 247, 247, 1);
    border-radius: 8rpx;
    text-align: center;
    height: 60rpx;
    line-height: 60rpx;
    margin: 0 0 21rpx 21rpx;
}

.active {
    width: 160rpx !important;
    height: 57rpx !important;
    line-height: 50rpx !important;
    border: 1rpx solid rgba(202, 73, 58, 1) !important;
    color: rgba(202, 73, 58, 1) !important;
    margin: 0 0 21rpx 21rpx !important;
}

/* 搜搜 */

.Search_Input {
    width: 600rpx;
    height: 68rpx;
    border-radius: 30rpx;
    background: #fff;
    border: 2rpx solid #bbb;
    margin-left: 20rpx;
    display: inline-block;
    vertical-align: middle;
    padding-left: 58rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #393939;
}

.Search_btn {
    display: inline-block;
    width: 130rpx;
    height: 58rpx;
    font-size: 30rpx;
    color: #393939;
    /* margin-top: 18rpx; */
    vertical-align: middle;
    line-height: 58rpx;
    text-align: center;
}

.Search_ico {
    width: 100%;
    height: 100%;
}

.Search_ico_box {
    position: absolute;
    left: 40rpx;
    top: 14rpx;
    width: 23rpx;
    height: 28rpx;
    z-index: 999;
}

/* tab */

.small_nav {
    width: 100%;
    background: #fff;
    font-size: 26rpx;
    margin-bottom: 20rpx;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.small_nav_scroll {
    display: flex;
    height: 80rpx;
    line-height: 80rpx;
    flex-direction: column;
    flex-wrap: wrap;
}

.small_nav_scroll>view {
    padding: 0 5rpx;
    margin: 0 25rpx;
    text-align: center;
    position: relative;
    color: rgba(155, 155, 155, 1);
}

.small_nav_scroll>view.cur {
    color: #000;
}

.small_nav_scroll>view.cur:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5rpx;
    background: #36ccf9;
}

.small_navFix {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20000;
}

/* 列表 */

.commList {
    width: 748rpx;
}

.commSingle {
    width: 720rpx;
    margin: 0 auto;
    margin-left: 20rpx;
}

.commList .commSingle .listBox>image {
    width: 346rpx;
    max-height: 614rpx;
    min-height: 346rpx;
}

.commList .commSingle .listBox .likeLove {
    width: 346rpx;
    height: 68rpx;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 1);
    line-height: 68rpx;
    position: absolute;
    bottom: 135rpx;
}

.listBox {
    width: 330rpx;
    margin-right: 30rpx;
    position: relative;
}

.loveLeft {
    margin-left: 20rpx;
}

.loveLeft>image {
    width: 26rpx;
    height: 22rpx;
    margin-right: 5rpx;
}

.moneyRight {
    margin-right: 40rpx;
    font-size: 32rpx;
}

/* 第一个img高度 */

/* .commSingle view:first-child .loevImg{
	height: 346rpx;
} */

/* 商品介绍 */

.introDuce {
    width: 319rpx;
    margin: 22rpx 17rpx 38rpx 10rpx;
    font-size: 28rpx;
    color: rgba(62, 53, 53, 1);
}

/* 底部 */

.remind {
    width: 750rpx;
    text-align: center;
    color: rgb(27, 27, 25);
    margin: 20rpx 0 30rpx 0;
}

在路上_a

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微信小程序搜索商品列表，上拉无限加载，tab切换请求不同接口，以及筛选等

//tab切换 wxml文件，<view class="Search_input_top_box"> <view class="Search_ico_box"> <icon class="Search_ico weui-icon-search_in-box" type="search" size="...
复制链接

扫一扫