微信小程序:封装一个关键词随机的搜索框组件

本文由清尘发表于2020-06-30 17:36属于移动前端分类

封装一个关键词随机的搜索框组件。

components/searchbar/searchbar.wxml

<form bindsubmit="formSubmit" class="searchc {{cateclass}} {{s_focus}}">
      <input name="keyw" data-curKey="{{search_placeholder}}" placeholder="{{search_placeholder}}" class="sec_l" confirm-type="search" bindfocus="formFocus" bindblur="formBlur" bindconfirm="formSubmit" bindinput='setWo' placeholder-class="sec_pl" value='{{kwod}}' />
      <image src="../../img/search.png" class="sear" />
</form>

components/searchbar/searchbar.wxss

.search_top{position:relative;margin-bottom:30rpx;overflow:hidden;}
.sec_l{background-color:#f9f9f9;border-radius:8px;height:76rpx;border:none;padding-left:60rpx}
.sear{width:30rpx;height:30rpx;position:absolute;left:20rpx;top:20rpx;z-index:10;}
.sec_pl{color:#c9c9c9;}

.catsearch{background-color:#fff;padding:0 40rpx 14rpx 40rpx;position:absolute;top:0;left:0;right:0;height:70rpx;border-bottom:1px solid #fafafa;z-index:10;}
.catsearch .searchc{background-color:#f9f9f9;padding:0 80rpx 0rpx 80rpx;border-radius:8px;overflow:hidden;height:70rpx;display:block;}
.catsearch .sec_l{border-radius:8px;position:relative;z-index:1;height:70rpx;text-align: center;}

.catsearch .sear{width:30rpx;height:30rpx;position:absolute;left:38%;top:20rpx;}
.catsearch.s_focus .sec_l{text-align: left;}
.catsearch.s_focus .sear{left:60rpx;}

components/searchbar/searchbar.json

{
  "component": true,
  "usingComponents": {}
}

components/searchbar/searchbar.js

// components/searchbar/searchbar.js
var startKey,key_len,keyArr=[];
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    keywords:{
      type:Array,
      value:[]
    },
    cateclass:String
  },

  /**
   * 组件的初始数据
   */
  data: {
    search_placeholder:'搜索商品',
    kwod:'',
    s_focus:''
  },

  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  observers:{
    keywords:function(keywords){
      if(keywords.length>0){
        keyArr = this.data.keywords;
        key_len = keywords.length - 1;
        this.randomKeywords();  //后端获取关键词完成时执行随时词
      }
      
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    formSubmit: function (e) {
      var w = e.detail.value;
      if (w.length < 1) {
        w = e.currentTarget.dataset.curkey;
        // wx.showModal({
        //   title: '错误提示',
        //   content: '请输入查询内容',
        //   success: function (res) {
        //     if (res.confirm) {
        //     } else if (res.cancel) {
        //     }
        //   }
        // });
        // return false;
      }
      this.setData({
        kwod:''
      });
      wx.navigateTo({
        url: '../search/search?keywords=' + w
      });
    },
    formFocus:function(){
      clearInterval(startKey);
      if(this.data.cateclass == 'catsearch'){ //分类页的搜索框
        this.setData({
          s_focus:'s_focus'
        })
  
      }
    },
    formBlur:function(){
      this.randomKeywords();
      if(this.data.cateclass == 'catsearch'){ //分类页的搜索框
        this.setData({
          s_focus:''
        })
  
      }
    },
    setWo: function (e) {
      var w = e.detail.value;
      this.setData({
        kwod: w
      })
    },
  //搜索框随机关键词
  randomKeywords:function(){
    startKey = setInterval(() => {
      var cur_key_index = this.randomNumBoth(0,key_len);
      var cur_key = keyArr[cur_key_index];

      this.setData({
        search_placeholder:cur_key
      })

    },1000);
  },
  randomNumBoth:function(Min,Max){
    var Range = Max - Min;
    var Rand = Math.random();
    var num = Min + Math.round(Rand * Range); //四舍五入
    return num;
  }

  }
})

首页调用(搜索框文字居左)

<searchbar keywords="{{keywords}}"></searchbar>

index.js里面传递数组

Page({
  data:{
   keywords:[]
  },
  onLoad: function(options) {
    var new_keywords = [
      '关键词1',
      '关键词2',
      '关键词3',
      '关键词4',
      '关键词5',
      '关键词6',
      '关键词7'
    ];
    setTimeout(() => {
      console.log('模拟后端异步传递关键词延时')  //模拟后端异步传递关键词延时,真实数据由后端API提供
      this.setData({
        keywords:new_keywords
      })
    },1000)
    this.getBannerList();
  },
})

分类页调用(搜索框文字居中)

  <searchbar keywords="{{keywords}}" cateclass="catsearch"></searchbar>

js部分同上

对应页面的json配置

{
    "navigationBarTitleText": "",
    "usingComponents":{
        "searchbar":"/components/searchbar/searchbar"
    }
}