请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

互动交流 onchang和滚动加载

1
回复
258
查看
[复制链接]

3

主题

4

帖子

35

积分

 楼主| 2018-8-28 19:46:12 显示全部楼层 |阅读模式
我这里遇到两个问题:
1>在onChange时,展示搜索列表,点击搜索列表的某一项展示产品列表,但是在点击搜索列表的某一项的时候又触发了一次onchange,因为不支持
oninput,所以不知道怎么处理
2>滚动加载不生效,page没法+1
<template>
    <div class="box">
        <div class="search">
            <div class="search-wrap fix-flex">
                <stack class="search-input">
                    <input type="text" placeholder="搜索" class="input" value="{{ inputVal }}" onChange="inputChange"/>
                    <div class="search-input-img" if="{{ showClearBtn }}"><image class="search-clear" src="../Common/img/clear.png"></image></div>
                </stack>
                <div class="search-btn-box flex-item">
                    <text class="search-btn" onclick="routerHome">取消</text>
                </div>
            </div>
                <!-- 搜索列表 -->
            <list class="search-result" if="{{ searchData.length > 0 && !show }}">
                <list-item type="searchResult" for="{{ searchData }}" onclick="showProList($item.name)"><text class="search-result-item">{{ $item.name }}</text></list-item>
            </list>
            <!-- 搜索结果为空 -->
            <div class="search-none" if="{{ showSearchNone && !searchData.length }}">
                <image src="../Common/img/icon_null.png" class="search-none-img"></image>
                <text class="search-none-text">抱歉!暂无搜索结果</text>
            </div>
            <!-- 搜索产品列表 -->
            <list class="search-pro-result" if="{{ proData && show }}">
                <list-item type="productLeft" class="search-pro-item" for="{{ proData }}">
                    <div class="product-item-inner">
                        <div class="product-item-left">
                            <image src="{{ $item.pic }}" class="product-item-img"></image>
                        </div>
                        <div class="product-item-right">
                            <text class="product-item-top">{{ $item.name }}</text>   
                            <div class="product-item-bto"><text class="product-item-price-num">{{ $item.price }}</text></div>
                        </div>
                    </div>
                </list-item>
                <list-item type="loadStatus" class="load-status">
                    <progress type="circular" if="{{hasMoreData}}"></progress>
                    <text if="{{hasMoreData}}">加载更多~</text>
                    <text else>全部加载完毕~</text>
                </list-item>
            </list>
        </div>
        <!-- 搜索历史 -->
        <!-- <div class="search-body-wrap">
            <div class="search-body">
                <div class="search-head">
                    <text class="search-body-title">历史搜索</text>
                    <image src="../Common/img/delete.png" class="search-history-delete"></image>
                </div>
                <div class="search-body-list">
                    <text class="search-body-item">手机</text>
                </div>
            </div>
        </div> -->
    </div>
</template>
import fetch from '@system.fetch'
    import router from '@system.router'
    import storage from '@system.storage'

    export default {
        data: {
            show: false,                      // 显示哪块内容
            inputVal: '',                     // 输入值
            showClearBtn: false,              // 显示清除按钮
            showSearchNone: false,            // 显示搜索为空
            searchData: [],                   // 搜索列表
            page: 1,
            proData: [],                      // 产品列表
            hasMoreData: true

        },
        onInit() {
            this.$page.setTitleBar({text: 'IT查报价'});
        },
        inputChange(e) {
            var that = this;
            if(e.value == '') {
                that.showClearBtn = false;
                return;
            } else {
                that.showClearBtn = true;
            }
            fetch.fetch({
                url:'',
                data: { keyword: e.value, a: 'SearchSuggest' },
                success: function(res) {
                    if (res.data[0]) {
                        console.log("res",JSON.stringify(res.data))
                        that.searchData = JSON.parse(res.data);
                        that.showSearchNone = false;
                        that.show = false;
                    } else {
                        that.showSearchNone = true;
                        that.searchData = [];
                        return;
                    }
                }
            })
        },
        showProList(value) {
            console.log("value",value)
            var that = this;
            var page = that.page;
            that.show = true;
            that.searchData = [];
            that.inputVal = value;

            if(value == '') {
                return;
            }
            console.log("page",page)
            fetch.fetch({
                url:'',
                data: { keyword: value, page: page, a: 'Search'  },
                success: function(res) {
                    var proOne = JSON.parse(res.data);
                    var proTwo = proOne.data;
                    if (proTwo.list) {
                        that.proData = that.proData.concat(proTwo.list);
                        page++;
                    } else {
                        that.hasMoreData = false;
                    }
                }
            })
        },




回复

使用道具 举报

6

主题

53

帖子

295

积分

2019-5-16 07:44:53 显示全部楼层
滚动到底部控制是  <list class="tutorial-page"> 要用 onscrollbottom 。 当到底部在加载时,触发方法
loadMoreData() {
    if (this.hasMoreData) {
      this.page++
//调用数据函数
      this.getArticle();

    }
  },
您试试看看是否可以解决
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册