WechatApplet-伪搜索（纯前端）

Posted 2021-07-25 web半晨

目录

• • 1、页面
  • • 1.1、html 部分
    • 1.2、json 部分
    • 1.3、JavaScript 部分
  • 2、搜索组件
  • • 2.1、html 部分
    • 2.2 JavaScript 部分
  • 3、置顶组件
  • 4、演示

---

说明

1.分页
2.返回顶部
3.实时搜索
4.点击搜索
5.自定义组件
6.父组件向子组件传值
7.父组件调用子组件中的方法（函数）
8.子组件向父组件传值
9.清除输入框
10.模糊查询正则匹配
11.全局样式
12.联系：MJ2506562048

---

1、页面

1.1、html 部分

<view>
	<!-- 搜索 -->
	<view class="fixed_0_0 back_FFF z_index_9">
		<view class="border_b_666" style="display:{{isImg?'block':'none'}}">
			<view class="grid_c2_350 padding_l_36 padding_tb_22 grid_row_gap_16">
				<view>每页条数：{{cont}}</view>

				<view>总条数：{{total}}</view>

				<view>当前页数：{{page-1}}</view>

				<view>总页数：{{totalPage}}</view>
			</view>

			<view class="grid_c3_200 padding_l_36 grid_row_gap_18 grid_column_gap_42">
				<view class="border_111 padding_10 radius_6">0:暂未开发</view>
				<view class="border_111 padding_10 radius_6">1:已完成</view>
				<view class="border_111 padding_10 radius_6">2:开发未结束</view>
				<view class="border_111 padding_10 radius_6">3:只有源码</view>
				<view class="border_111 padding_10 radius_6">4:已废弃</view>
			</view>

			<view class="margin_t_26">
				<radio-group bindchange="radioChange">
					<view class="dis_r_se">
						<label class="">
							<radio value="1" checked="true" />点击搜索
						</label>
						<label class="">
							<radio value="2" />实时搜索
						</label>
					</view>
				</radio-group>
			</view>

			<search id="searchId" pla="{{pla}}" btnTitle="{{btnTitle}}" searchType="{{searchType}}" bind:myEvent="onMyEvent"></search>
		</view>

		<view class="dis_r_c padding_tb_16" catchtap="showSearch">
			<image class="img" src="{{isImg?'/image/public/towards_top.png':'/image/public/towards_bottom.png'}}"></image>
		</view>
	</view>

	<!-- 功能列表 -->
	<view class="{{isImg?'margin_t_570':'margin_t_90'}}">
		<view class="dis_r_sb margin_tb_20 padding_tb_20 padding_lr_30 border_b_666" wx:for="{{dataList}}" wx:key="index" bindtap="details" data-item="{{item}}">
			<view class="dis_r_fs width_520 font_size_30">
				<view class="flex_1 font_weight_700">{{index+1}}、</view>
				<view class="flex_9 ellipsis color_777">{{item.status}}-{{item.title}}</view>
			</view>

			<view class="width_100 radius_6 font_size_26 color_EEE back_555 line_height_60 text_align_center letter_spacing_2" catchtap="sourceCode" data-url="{{item.url}}" wx:if="{{item.url}}">源码</view>
		</view>
	</view>

	<!-- 返回顶部 -->
	<backToTop wx:if="{{scrollTop}}"></backToTop>
</view>

---

1.2、json 部分

{
	"usingComponents": {
		"search": "/components/search/search"
	},
	"navigationBarTitleText": "伪搜索"
}

---

1.3、javascript 部分

const {
  globalData: {
    jsonData: {
      functionList
    },
    showToast
  }
} = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList: [],
    scrollTop: false,
    searchType: 1,
    btnTitle: '搜索',
    pla: '请输入标题',
    page: 1,
    cont: 10,
    total: 0,
    totalPage: 0,
    scrolls: true,
    isImg: false
  },

  // 展开搜索
  showSearch() {
    this.setData({
      isImg: !this.data.isImg,
      searchType: this.data.searchType
    });
  },

  // 选择搜索类型
  radioChange({
    detail: {
      value
    }
  }) {
    // 调用子组件的函数方法
    this.selectComponent("#searchId").initData();

    this.setData({
      searchType: value,
      page: 1,
      scrolls: true,
      dataList: []
    });
    this.getData();
  },

  // 获取数据
  getData() {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    let page = this.data.page,
      totalPage = this.data.totalPage,
      cont = this.data.cont,
      dataList = this.data.dataList,
      newData = [];
    if (page > totalPage) {
      this.setData({
        scrolls: false
      });
      return showToast('没有更多数据了', 'none', 2000, false);
    };
    for (let i = cont * page - 10; i < page * cont; i++) {
      const item = functionList[i];
      if (item) {
        newData.push(item);
      };
    };
    this.setData({
      dataList: [...dataList, ...newData],
      page: page += 1
    });
    wx.nextTick(() => {
      wx.hideLoading();
    });
  },

  // 接收子组件传过来的值
  onMyEvent({
    detail: {
      value
    }
  }) {
    if (!value) {
      this.setData({
        dataList: [],
        page: 1,
        scrolls: true
      });
      this.getData();
      return false
    };
    this.setData({
      dataList: [],
      scrolls: false
    });
    this.setData({
      dataList: functionList.filter(function (item) {
        let inputValue = new RegExp(`(.*)(${value.split('').join(')(.*)(')})(.*)`, 'i');
        return item.title.match(inputValue);
      })
    });

    if (!this.data.dataList.length) showToast('未找到匹配的数据');
  },

  // 复制路径
  sourceCode({
    currentTarget: {
      dataset: {
        url
      }
    }
  }) {
    wx.setClipboardData({
      data: url,
      success() {
        showToast('链接复制成功', 'success');
        // wx.getClipboardData({
        //   success(res) {
        //     console.log(res.data)
        //   }
        // })
      }
    })
  },

  // 跳转到详情页面
  details({
    currentTarget: {
      dataset: {
        item: {
          path,
          status
        }
      }
    }
  }) {
    switch (status) {
      case 0:
        showToast('暂未开发');
        break;
      case 1:
        wx.navigateTo({
          url: '/' + path
        });
        break;
      case 2:
        showToast('开发未结束');
        break;
      case 3:
        showToast('无页面只有源码');
        break;
      default:
        showToast('已废弃');
        break;
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      total: functionList.length,
      totalPage: Math.ceil(functionList.length / 10)
    });
    this.getData();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.scrolls) {
      this.getData();
    }
  },

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

  },

  /**
   * 监听滚动条
   */
  onPageScroll: function ({
    scrollTop
  }) {
    this.setData({
      scrollTop: scrollTop >= 100 ? true : false
    })
  }
})

---

2、搜索组件

2.1、html 部分

<view>
	<!-- 按钮搜索 -->
	<view class="dis_r_sb margin_30" wx:if="{{searchType==1?true:false}}">
		<view class="flex_6 dis_r_sb border_666 padding_10 radius_8">
			<input class="flex_8 height_50" placeholder="{{pla}}" value="{{clickInput}}" bindinput="clickInputF"></input>
			<view class="flex_1 dis_r_c margin_l_26" catchtap="clear">
				<view class="clear_30">×</view>
			</view>
		</view>

		<view class="flex_1 margin_l_36 text_align_center padding_10 radius_6 back_theme color_222 font_weight_600" catchtap="clickSearch">{{btnTitle}}</view>
	</view>

	<!-- 实时输入 -->
	<view class="dis_r_sb margin_30" wx:if="{{searchType==2?true:false}}">
		<view class="flex_6 dis_r_sb border_666 padding_10 radius_8">
			<input class="flex_8 height_50" placeholder="{{pla}}" value="{{realTimeInput}}" bindinput="realTimeInputF"></input>
			<view class="flex_1 dis_r_c margin_l_26" catchtap="clear">
				<view class="clear_30">×</view>
			</view>
		</view>
	</view>
</view>

---

2.2 JavaScript 部分

const {
  globalData: {
    jsonData: {
      functionList
    },
    showToast
  }
} = getApp();

Component({
  // 此操作是使用全局样式
  options: {
    addGlobalClass: true
  },

  /**
   * 组件的属性列表
   */
  properties: {
    pla: {
      type: String,
      value: '请输入内容'
    },
    btnTitle: {
      type: String,
      value: '提交'
    },
    searchType: {
      type: Number,
      value: 1
    }
  },

  // 实时搜索
  realTimeInputF({
    detail: 前端开发工具vscode如何快速生成代码片段

 前端的mvvm是啥意思
 伪静态和真静态
 Web开发纯前端实现科技企业官网首页
 SQLite 片段函数实现不会在 TextView 中将文本格式化为 HTML
 Django实现组合搜索的方法示例