uni-app开发小程序,笔记记录4 搜索

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购 笔记地址

知识点

1 自定义组件 创建components

2 自定义属性

	props:{
      bgcolor:{
        type:String,
        default:'#C000D0'
      },
      radius:{
        type:Number,
        default:18
      }
    },

<view class="search-layout" :style="{'background-color': bgcolor}" @click="searchBoxHandler">

 <view class="search-center-layout" :style="{'border-radius':radius + 'px'}">

2 对外暴露点击事件

@click="searchBoxHandler

	searchBoxHandler(){
        // console.log("searchBoxHandler")
        this.$emit('click')  
      }

3 使用

<my-serach bgcolor="#0000C0" radius="25" @click="searchBox"></my-serach>

	searchBox(){
          // console.log("searchBox")
          uni.navigateTo({
            url:'/subpkg/search/search'
          })
      }

4 uni-search-bar

<uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>

4,1 创建 uni-ui项目


使用时 ,用哪个复制那个就行 ,我是这么用的了

5 if - else 控制

	   <view class="sugg-list" v-if="searchResults.length !== 0">
    
       </view>
       <view class="history-box" v-else>
        
       </view>

6 计时器

	data() {
      return {
          timer:null,
      };
    },

		clearTimeout(this.timer)  // 第一步 清空计时器
        this.timer = setTimeout(()=>{
        	// 时间到后 - 执行代码
          this.kw = e   
          console.log(this.kw)
          
        },500) // 设置 5 毫秒后 触发

7 网络请求 两种方式

	// 方式一 
	async getSearchList(){
        if(this.kw === ''){
          this.searchResults = []
          return 
        }
        const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{ query: this.kw })
        if(res.meta.status !== 200) return uni.$showMsg()
        this.searchResults = res.message
      },

	//方式二
	async getSearchList2(){
        if(this.kw === ''){
          this.searchResults = []
          return 
        }
        const {data:res} = await uni.request({
          url:"https://www.uinav.com/api/public/v1/goods/qsearch",
          method:"GET",
          data:{ query: this.kw },
          success:(res)=>{
            console.log(res)
            //
             this.searchResults = res.data.message
             this.saveSearchHistory()
          }
        })
      },

8 数组反转 - 计算属性 computed

	 computed:{
      historys(){
        return [...this.historyList].reverse()
      }
    },

8.1 使用

 <view class="history-list-item" v-for="(item ,i) in historys" :key="i" @click="gotoSearch(item)">

9 数组新增内容

this.historyList.push(this.kw)  // 尾部顺序添加

10 数组新增内容 , 并 去重 , 并放在最后面

	saveSearchHistory(){
        
        const set = new Set(this.historyList)  // 数组 转Set
        
        set.delete(this.kw) // 删除内容 ,
        set.add(this.kw)    // 添加内容 ,  先删除 后 添加 ,可以确保位置在末尾
        
        this.historyList = Array.from(set);  // set 转  array
        // this.historyList.push(this.kw)
  
      },

11 数据保存

    uni.setStorageSync('kw',JSON.stringify(this.historyList));

12 获取保存内容

	this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')

13 吸顶效果

.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}

14 单行显示

	.goods-name{
       // 文字不允许换行 单行显示
       white-space: nowrap;
       //溢出部分隐藏
       overflow: hidden;
       // 文本溢出后 ,使用...代替
       text-overflow: ellipsis;
	}

源码

<template>
  <view class="search-layout" :style="{'background-color': bgcolor}" @click="searchBoxHandler">
    
      <view class="search-center-layout" :style="{'border-radius':radius + 'px'}">
        
          <uni-icons type="search" size="17"></uni-icons>
          <text class="search-center-layout-text">搜索</text>
      </view>
    
  </view>
</template>

<script>
  export default {
    name:"my-serach",
    data() {
      return {
        
      };
    },
    props:{
      bgcolor:{
        type:String,
        default:'#C000D0'
      },
      radius:{
        type:Number,
        default:18
      }
    },
    methods:{
      searchBoxHandler(){
        // console.log("searchBoxHandler")
        this.$emit('click')
      }
    }
  }
</script>

<style lang="scss">

  .search-layout{
    
    width: 750rpx;
    height: 92rpx;
    display: flex;
    
    .search-center-layout{
      
      width: 700rpx;
      height: 65rpx;
      margin-left: 25rpx;
      margin-top: 15rpx;
      background-color: #FFFFFF;
    
      display: flex;
      align-items: center;
      justify-content: center;
      
      .search-center-layout-text{
        font-size: 15px;
        margin-left: 10rpx;
      }
      
    }
    
  }
</style>

<template>
  <view>
       <view class="search-box">
         <!-- 使用 uni-ui 提供的搜索组件 -->
         <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar>
       </view>
      
       <view class="sugg-list" v-if="searchResults.length !== 0">
         <view class="search-list">
            <view class="search-list-item" v-for="(item ,i) in searchResults" :key="i" @click="gotoDetails(item.goods_id)">
                <view class="goods-name">{{item.goods_name}}</view>
            </view>
         </view>
       </view>
       <view class="history-box" v-else>
         <view class="history-view" >
            
            <view class="history-title">
              <view >搜索历史</view>
              <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
            </view>
            <view class="history-list" >
               <view class="history-list-item" v-for="(item ,i) in historys" :key="i" @click="gotoSearch(item)">
                   {{item}}
               </view>
            </view>
            
         </view>
       </view>
       
      
  </view>
</template>

<script>
  export default {
    data() {
      return {
          timer:null,
          kw:'',
          searchResults:[],
          historyList:[]
      };
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')
      //
    },
    computed:{
      historys(){
        return [...this.historyList].reverse()
      }
    },
    methods: {
      input(e) {
        // e 是最新的搜索内容
        clearTimeout(this.timer)
        this.timer = setTimeout(()=>{
          this.kw = e 
          console.log(this.kw)
          // this.getSearchList()
          this.getSearchList2()
        },500)
      },
      async getSearchList(){
        
        if(this.kw === ''){
          this.searchResults = []
          return 
        }
        const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{ query: this.kw })
        
        if(res.meta.status !== 200) return uni.$showMsg()
        
        // goods_id  goods_name 
        this.searchResults = res.message
        
      },
      async getSearchList2(){
        
        if(this.kw === ''){
          this.searchResults = []
          return 
        }
        const {data:res} = await uni.request({
          url:"https://www.uinav.com/api/public/v1/goods/qsearch",
          method:"GET",
          data:{ query: this.kw },
          success:(res)=>{
            console.log(res)
            //
             this.searchResults = res.data.message
             this.saveSearchHistory()
          }
          
        })
        
      },
      gotoDetails(res){
        uni.navigateTo({
          url:'/subpkg/goods_detail/goods_detail?goods_id='+res
        })
      },
      gotoSearch(item_name){
        // this.kw = item_name
        // this.getSearchList2()
      },
      saveSearchHistory(){
        
        const set = new Set(this.historyList)
        
        set.delete(this.kw)
        set.add(this.kw)
        
        this.historyList = Array.from(set);
        // this.historyList.push(this.kw)
        //
        uni.setStorageSync('kw',JSON.stringify(this.historyList));
      },
      cleanHistory(){
        this.historyList = [];
        uni.setStorageSync('kw',JSON.stringify(this.historyList));
        
      }
    }
  }
</script>

<style lang="scss">
.search-box {
  position: sticky;
  top: 0;
  z-index: 999;
}
   
   .search-list-item{
     font-size: 28rpx;
     margin: 20rpx 10rpx;
     padding-bottom: 10rpx;
     border-bottom: 1rpx solid #efefef;
     
     .goods-name{
       // 文字不允许换行 单行显示
       white-space: nowrap;
       //溢出部分隐藏
       overflow: hidden;
       // 文本溢出后 ,使用...代替
       text-overflow: ellipsis;
       margin-right: 3px;
       
     }
   }//end .search-list-item
   
   .history-view{
      padding: 20rpx;
      
      .history-title{
          font-size: 28rpx;
          padding-bottom: 10rpx;
          margin-bottom: 20rpx;
          border-bottom: 1px solid #efefef;
          display: flex;
          justify-content: space-between;
          align-items: center;
              
      }//end 
      
      .history-list{
        display: flex;
        flex-wrap: wrap;
        
        .history-list-item{
            background-color: #efefef;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
        }//end
        
       
        
      }//end
     
   }// end history-view
</style>