【笔记】实战mpvue2.0多端小程序框架——搜索模块（上）

最新推荐文章于 2021-04-26 16:26:11 发布
最新推荐文章于 2021-04-26 16:26:11 发布
阅读量465 收藏 2
点赞数 1
分类专栏： 【笔记】实战mpvue2.0多端小程序框架 文章标签： mpvue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32682301/article/details/105940137
版权

文章目录

搜索开发 | 「小慕读书」官网

一、搜索视觉稿

http://www.youbaobao.xyz/mpvue-design/preview/#artboard1

二、搜索页面组件结构图

search

三、标签组件

可交互的标签组件 tag

组件名称属性参数用途默认值
Tagpropstext标签文本(空)
methodsonClick标签点击事件(空)

1.新建src\components\base\Tag.vue

<template>
  <div class="tag-wrapper" @click="onClick">
    <div class="tag">{{text}}</div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
  .tag-wrapper {
    display: flex;
    justify-content: center;
    background: #F7F7F9;
    border-radius: 16px;
    padding: 6px 17px;
    .tag {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 14px;
      color: #272E37;
    }
  }
</style>

2.新建src\pages\search\main.js

import Vue from 'vue'
import App from './search'

const app = new Vue(App)
app.$mount()

3.新建src\pages\search\search.vue

<template>
  <div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>

修改src\components\home\SearchBar.vue的如下部分（添加点击事件）：

<div class="search-bar-wrapper" @click="onSearchBarClick">

为src\pages\index\index.vue的onSearchBarClick事件添加路由跳转：

onSearchBarClick() {
  this.$router.push('/pages/search/main')
},

4.新建src\pages\search\main.json

{
  "navigationBarTitleText": "搜索"
}

四、标签分组组件

标签分组组件，包含一个标题和按钮，以及标签分组 tag_group

组件名称属性参数用途默认值
TagGrouppropsheaderText标题文本(空)
btnText按钮文本(空)
value标签数据[]
methodsonTagClick标签点击事件(空)
onBtnClick按钮点击事件(空)

1.新建src\components\base\TagGroup.vue

<template>
  <div class="tag-group-wrapper">
    <div class="tag-group-header">
      <div class="header-text">{{headerText}}</div>
      <div class="header-btn" @click="onBtnClick">{{btnText}}</div>
    </div>
    <div class="tag-goup">
      <div class="tag-group-inner" v-for="(text, index) in value" :key="index">
        <Tag :text="text" @onClick="onTagClick(text, index)"/>
      </div>
    </div>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  components: {Tag},
  props: {
    headerText: String,
    btnText: String,
    value: Array
  },
  methods: {
    onTagClick(text, index) {
      this.$emit('onTagClick', text, index)
    },
    onBtnClick() {
      this.$emit('onBtnClick')
    }
  }
}
</script>

<style lang="scss" scoped>
  .tag-group-wrapper {
    .tag-group-header {
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
      font-size: 14px;
      line-height: 20px;
      .header-text {
        color: #333333;
      }
      .header-btn {
        color: #3696EF;
      }
    }
    .tag-goup {
      display: flex;
      flex-flow: row wrap;
      padding: 4px 10px 0 10px;
      .tag-group-inner {
        padding: 12px 6px 0 6px;
      }
    }
  }
</style>

2.在src\pages\search\search.vue中引入TagGroup

<template>
  <div>
    <TagGroup
      :value="tags"
      header-text="热门搜索"
      btn-text="换一批"
      @onTagClick="onTagClick"
      @onBtnClick="onBtnClick"
    />
  </div>
</template>

<script>
import TagGroup from '../../components/base/TagGroup'
export default {
  components: {
    TagGroup
  },
  data() {
    return {
      tags: [
        'aaaaaa',
        'bbbbb',
        'c',
        'ddddddddddddddddd',
        'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
        'ffffffffff'

      ]
    }
  },
  methods: {
    onTagClick(text, index) {
      console.log('tag...', text, index)
    },
    onBtnClick() {
      console.log('btn...')
    }
  }
}
</script>

3.效果

在这里插入图片描述

五、搜索分类组件

搜索列表中的分类组件 component_search_item

组件名称属性参数用途默认值
SearchItempropstitle标题文本(空)
subTitle副标题文本(空)
icon图标类型(空)
methodsonClick分类点击事件(空)

1.新建src\components\search\SearchItem.vue

<template>
  <div class="search-item-wrapper" @click="onClick">
    <div class="search-item-icon">
      <div class="icon-wrapper">
        <van-icon :name="icon" color="#777777" :style="{ width:'20px', height:'20px' }" />
      </div>
    </div>
    <div class="search-item-info">
      <div class="search-item-title">{{title}}</div>
      <div class="search-item-sub-title">{{subTitle}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    subTitle: String,
    icon: String
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-item-wrapper {
    display: flex;
    align-items: center;
    padding: 15px;
    height: 36.5px;
    .search-item-icon {
      .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #F7F7F9;
      }
    }
    .search-item-info {
      margin-left: 10px;
      .search-item-title {
        color: #333333;
        font-size: 14px;
        line-height: 20px;
      }
      .search-item-sub-title {
        color: #777777;
        font-size: 12px;
        line-height: 16.5px;
      }
    }
  }
</style>

2.在src\pages\search\search.vue中引入

<SearchItem icon="apps-o" title="计算机科学" sub-title="类别"/>

六、搜索列表组件

搜索结果列表组件

component_search_table

组件名称属性参数用途默认值
SearchTablepropsdata列表数据[]
methodsonClick图书点击事件(空)

1.新建src\components\search\SearchTable.vue

<template>
  <div class="search-table-wrapper">
    <div class="search-table-inner">
      <div class="search-table-book" v-for="(book, index) in data" :key="index" @click="onClick(book)">
        <div class="book-img-wrapper">
          <div class="book-img">
            <ImageView :src="book.cover"/>
          </div>
        </div>
        <div class="book-info-wrapper">
          <div class="book-title">{{book.title}}</div>
          <div class="book-author">{{book.author}}</div>
          <div class="book-category">{{book.categoryText}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageView from '../base/ImageView'
export default {
  components: {ImageView},
  props: {
    data: Array
  },
  methods: {
    onClick(book) {
      this.$emit('onClick', book)
    }
  }
}
</script>

<style lang="scss" scoped>
  .search-table-wrapper {
    padding: 0 16px;
    .search-table-inner {
      .search-table-book {
        margin: 14.5px 0;
        display: flex;
        align-items: center;
        .book-img-wrapper {
          .book-img {
            width: 47px;
            height: 68.5px;
          }
        }
        .book-info-wrapper {
          width: 80%;
          margin-left: 15.5px;
          .book-title {
            color: #333333;
            font-size: 16px;
            line-height: 22.5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 500;
          }
          .book-author {
            color: #999999;
            font-size: 13px;
            line-height: 18px;
            margin-top: 5px;
          }
          .book-category {
            color: #777777;
            font-size: 13px;
            line-height: 18px;
          }
        }
      }
    }
  }
</style>

2.在src\pages\search\search.vue中引入

<SearchTable :data="list"/>
...
data() {
    return {
    	...
      list: [
        {
          'id': 225,
          'fileName': '2016_Book_MicrofinanceEUStructuralFundsA',
          'cover': 'https://www.youbaobao.xyz/book/res/img/Economics/2016_Book_MicrofinanceEUStructuralFundsA.jpeg',
          'title': 'Microfinance, EU Structural Funds and Capacity Building for Managing Authorities',
          'author': 'Giovanni Nicola Pes',
          'publisher': 'Palgrave Macmillan',
          'bookId': '2016_Book_MicrofinanceEUStructuralFundsA',
          'category': 3,
          'categoryText': 'Economics',
          'language': 'en',
          'rootFile': 'OEBPS/9781137536013.opf'
        },
        {
          'id': 88,
          'fileName': '2018_Book_BetweenMobilityAndMigration',
          'cover': 'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg',
          'title': 'Between Mobility and Migration',
          'author': 'Peter Scholten',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_BetweenMobilityAndMigration',
          'category': 2,
          'categoryText': 'SocialSciences',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 225,
          'fileName': '2016_Book_MicrofinanceEUStructuralFundsA',
          'cover': 'https://www.youbaobao.xyz/book/res/img/Economics/2016_Book_MicrofinanceEUStructuralFundsA.jpeg',
          'title': 'Microfinance, EU Structural Funds and Capacity Building for Managing Authorities',
          'author': 'Giovanni Nicola Pes',
          'publisher': 'Palgrave Macmillan',
          'bookId': '2016_Book_MicrofinanceEUStructuralFundsA',
          'category': 3,
          'categoryText': 'Economics',
          'language': 'en',
          'rootFile': 'OEBPS/9781137536013.opf'
        },
        {
          'id': 88,
          'fileName': '2018_Book_BetweenMobilityAndMigration',
          'cover': 'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg',
          'title': 'Between Mobility and Migration',
          'author': 'Peter Scholten',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_BetweenMobilityAndMigration',
          'category': 2,
          'categoryText': 'SocialSciences',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 225,
          'fileName': '2016_Book_MicrofinanceEUStructuralFundsA',
          'cover': 'https://www.youbaobao.xyz/book/res/img/Economics/2016_Book_MicrofinanceEUStructuralFundsA.jpeg',
          'title': 'Microfinance, EU Structural Funds and Capacity Building for Managing Authorities',
          'author': 'Giovanni Nicola Pes',
          'publisher': 'Palgrave Macmillan',
          'bookId': '2016_Book_MicrofinanceEUStructuralFundsA',
          'category': 3,
          'categoryText': 'Economics',
          'language': 'en',
          'rootFile': 'OEBPS/9781137536013.opf'
        },
        {
          'id': 88,
          'fileName': '2018_Book_BetweenMobilityAndMigration',
          'cover': 'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg',
          'title': 'Between Mobility and Migration',
          'author': 'Peter Scholten',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_BetweenMobilityAndMigration',
          'category': 2,
          'categoryText': 'SocialSciences',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        }
      ]
    }
  },

3.效果

在这里插入图片描述

七、综合搜索列表组件

包含分类和列表的综合搜索列表
component_search_list

组件名称属性参数用途默认值
SearchListpropsdata列表数据{}
methodsshowList展示分类点击后的列表(空)

1. 新建src\components\search\SearchList.vue

<template>
  <div class="search-list-wrapper">
    <SearchTable :data="data"/>
    <SearchItem icon="apps-o" title="计算机科学" sub-title="类别"/>
    <SearchItem icon="apps-o" title="计算机科学" sub-title="类别"/>
    <SearchItem icon="apps-o" title="计算机科学" sub-title="类别"/>
  </div>
</template>

<script>
import SearchItem from './SearchItem'
import SearchTable from './SearchTable'
export default {
  components: {SearchTable, SearchItem},
  props: {
    data: Object
  },
  methods: {
    showList() {
    },
  }
}
</script>

<style lang="scss" scoped>
</style>

2.修改src\pages\search\search.vue

  • data中新增：
item: [
  { icon: 'apps-o', title: 'Compute Science', subTitle: 'Category' },
  { icon: 'contact', title: 'Compute Science', subTitle: 'Author' },
  { icon: 'newspaper-o', title: 'Compute Science', subTitle: 'Publisher' }
],
  • 通过computed将data整合为一个参数对象
computed: {
  data() {
    return {
      item: this.item,
      list: this.list
    }
  }
},
  • 去掉SearchTable和SearchItem，替换为SearchList
<SearchList :data="data"/>

3.修改src\components\search\SearchList.vue

在src\components\search\SearchList.vue中使用计算属性动态拿到传过来的数据：

computed: {
  categroy() {
    return this.data.item[0]
  },
  author() {
    return this.data.item[1]
  },
  publisher() {
    return this.data.item[2]
  }
},
  • 在页面部分绑定数据：
<SearchItem
  :icon="categroy.icon"
  :title="categroy.title"
  :sub-title="categroy.subTitle"
  @onClick="showList(categroy.title, 'categroy')"
/>
<SearchItem
  :icon="author.icon"
  :title="author.title"
  :sub-title="author.subTitle"
  @onClick="showList(author.title, 'author')"
/>
<SearchItem
  :icon="publisher.icon"
  :title="publisher.title"
  :sub-title="publisher.subTitle"
  @onClick="showList(publisher.title, 'publisher')"
/>
<SearchTable :data="data.list" @onClick="onBookClick"/>
  • 文件完整内容如下：
<template>
  <div class="search-list-wrapper">
    <SearchItem
      :icon="categroy.icon"
      :title="categroy.title"
      :sub-title="categroy.subTitle"
      @onClick="showList(categroy.title, 'categroy')"
    />
    <SearchItem
      :icon="author.icon"
      :title="author.title"
      :sub-title="author.subTitle"
      @onClick="showList(author.title, 'author')"
    />
    <SearchItem
      :icon="publisher.icon"
      :title="publisher.title"
      :sub-title="publisher.subTitle"
      @onClick="showList(publisher.title, 'publisher')"
    />
    <SearchTable :data="data.list" @onClick="onBookClick"/>
  </div>
</template>

<script>
import SearchItem from './SearchItem'
import SearchTable from './SearchTable'
export default {
  components: {SearchTable, SearchItem},
  props: {
    data: Object
  },
  computed: {
    categroy() {
      return this.data.item[0]
    },
    author() {
      return this.data.item[1]
    },
    publisher() {
      return this.data.item[2]
    }
  },
  methods: {
    showList(text, key) {
      console.log(text, key)
    },
    onBookClick(book) {
      console.log(book)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

4.效果

在这里插入图片描述

程序边界
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
开发笔记：使用 mpvue 开发斗图小程序
03-29
之前用过 wepy 框架写了个小程序 GitHub - yshkk/shanbay-mina: 基于 wepy 框架的 “扇贝阅读” 微信小程序 ，感觉写法上类似 vue，但不那么彻底。现在美团点评发布的 mpvue 支持开发者可以用 vue 的语法开发...
微信小程序wepy框架笔记小结
10-18
主要介绍了微信小程序wepy框架笔记小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
mpvue公共自定义头部
qq_42905217的博客
09-29 242
mpvue公共自定义头部 Hello，大家好！好久不见我又回来啦，今天忙里偷闲给大家更新一个小程序实现自定义头部信息。 代码如下 <template> <div class="comp-navbar"> <cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view> <cover-view class
【笔记】实战mpvue2.0多端小程序框架——原生小程序 API 调用与多端小程序发布
程序边界
05-16 1397
文章目录一、支付宝小程序源码运行1.开发者工具下载2.获取openId(1)生成公钥和私钥(2)填入公钥信息(3)服务端 SDK(4)Node.js 版本开发3.获取用户信息4.用户授权5.API 改造二、支付宝小程序用户授权三、支付宝小程序获取OpenId四、支付宝小程序组件定制开发 支付宝小程序开发指南 | 「小慕读书」官网 一、支付宝小程序源码运行 1.开发者工具下载 下载 - 支付宝开放平台 2.获取openId (1)生成公钥和私钥 开发 openId 获取接口需要生成公钥和私钥，查看：技
微信小程序框架mpvue实战：图书商城
01-02
本项目使用的框架是美团团队推出的小程序框架Mpvue，项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库，后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue，熟悉小程序同后端交互，及同微信官方的交互流程。
小程序的框架mpVue视频教程
06-09
mpVue是美团开发团队推出的一个小程序的框架, 是现在市面上最火的小程序框架之一, 其优点是可以使用vue.js的开发模式去开发小程序, 具备模块化, 组件化, 工程化的优点, 也可以使用第三方库如:Vuex, flyio等。作为当今炙手可热的小程序的框架是前端工程师的必备技能之一。学习本套视频之后可快速上手mpVue。
【笔记】实战mpvue2.0多端小程序框架——搜索模块（下）
程序边界
05-12 386
文章目录一、搜索模块组件集成二、搜索模块API对接三、热门搜索API对接四、搜索框按键和搜索功能开发五、历史搜索和热搜更新功能开发六、触底自动刷新功能开发 搜索开发 | 「小慕读书」官网 一、搜索模块组件集成 二、搜索模块API对接 三、热门搜索API对接 四、搜索框按键和搜索功能开发 五、历史搜索和热搜更新功能开发 六、触底自动刷新功能开发 ...
微信小程序——云笔记（截图+源码）.zip
05-05
微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序——云笔记（截图+源码）.zip 微信小程序...
Nodejs框架+uniapp前端微商个人相册多端小程序源码.zip
10-29
Nodejs框架+uniapp前端微商个人相册多端小程序源码 带安装教程 微商个人相册多端小程序源码，用于个人相册展示，适合微商，有客服联系，无需后台管理系统，小程序上直接进行管理，没有登录账号只拥有查看功能。 ...
区块链项目实战：支持以太坊的小程序云笔记
06-10
本课程实现了一款基于小程序的云笔记应用。该应用支持以太坊。可以将云笔记数据保存到以太坊网络上，同时也支持MySQL数据库。
美食搜索小程序mpvue框架
08-10
美食搜索 小程序（mpvue框架）
NodejsExpressjsVuejsElementUI全栈开发王者荣耀手机端官网和管理后台
08-10
Node.js (Express.js) Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台
mpvue-books:图书馆
05-12
你好mpvue mpvue项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请的和。
小程序商城源码（mpvue）
12-13
此代码使用mpvue编写，希望能帮助各位朋友 ！
mpvue微信小程序下拉框搜索组件
wocwin的博客
04-26 2865
初始下拉选择如（图一） 最终效果如（图二） 思路 左边是输入框，可以进行模糊查询，右边图标进行选择（简单就是根据input输入值进行过滤） 具体代码 <template> <div class="dh-search" :style="dhSearchStyle"> <input v-model.trim="pickerValue" :placeholder="placeholder" class="picker-item-in
mpvue 微信小程序input点击键盘 搜索 触发confirm事件
热门推荐
唯一的切慕，唯一的诗歌……
05-07 1万+
template部分 键盘为搜索 input 需设置 confirm-type=”search”，完成、前往、发送，去官网看，小程序官方input介绍网址 &lt;input confirm-type="search" v-model="keyword" placeholder="你想去哪？" @confirm="confirm($event)"&gt; methods部分 // 小程序...
【笔记】实战mpvue2.0多端小程序框架——书架模块
程序边界
05-14 637
文章目录一、图书列表页面开发 + 列表 API 对接二、图书列表标题动态切换+图书详情页跳转三、图书列表触底自动刷新功能开发四、分类列表页面开发 + 分类 API 对接五、分类列表跳转图书列表功能开发六、阅读器页面开发1.学习重点2.阅读器组件3.动手操作七、书架页面开发1.学习重点2.书架视觉稿3.用户信息面板4.书架列表组件5.动手操作八、书架用户面板组件开发九、书架列表组件开发 一、图书列表页面开发 + 列表 API 对接 新建src\pages\list\list.vue： <templat
【实战】Vue Element+Node.js开发企业通用管理后台系统——Vue进阶（上）
程序边界
04-07 2235
文章目录一、$emit 和 $on1.$on2.$emit二、directive 用法三、Vue.component 用法源码分析四、Vue.extend 用法五、Vue.extend 进阶用法六、Vue.use 用法 http://www.youbaobao.xyz/admin-docs/guide/base/vue.html 一、$emit 和 $on $emit 和 $on主要负责事...
笔记本电脑USB2.0测试
最新发布
11-22
您可以在互联网上搜索并下载这些工具，然后按照其提供的说明进行测试。 请注意，具体的测试方法可能因不同的笔记本电脑品牌和型号而有所不同。建议您查阅您笔记本电脑的用户手册或联系厂商获取更详细的测试指南。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序边界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值