微幕小程序增强版自定义Search页面

微幕小程序增强版自定义Search页面,咋一看,很多人不是很明白,菜鸟库就放两张图对比一下!

微幕小程序增强版自定义Search页面

微幕小程序增强版原版

微幕小程序增强版自定义Search页面

菜鸟库修改版

建立文件夹

在小程序的pages文件夹中新增search文件夹!并建立search.js,search.json,search.wxml,search.wxss,其他小程序参考原有的目录结构以及文件后缀举一反三!

添加代码

search.js添加以下代码:

import config from '../../utils/config.js'
var Api = require('../../utils/api.js')
var util = require('../../utils/util.js')
var WxParse = require('../../wxParse/wxParse.js')
var wxApi = require('../../utils/wxApi.js')
var wxRequest = require('../../utils/wxRequest.js')
var pageCount = 10
const app = getApp()
Page({
data: {
pageTitle: '搜索',
howallDisplay: "block",
displayHeader: "none",
displaySwiper: "none",
floatDisplay: "none",
displayfirstSwiper: "none",
copyright: app.globalData.copyright
},
onLoad: function (options) {
// 设置页面标题
var self = this;
this.getTagsData()
this.setData({copyright: app.globalData.copyright})
},
// 分享
onShareAppMessage: function () {
return {
title: '你的好友给你分享了一个不错的小程序,快来看看吧',
path: 'pages/search/search'
}
},
getTagsData() {
let self = this
let params = {
pageCount: 35,
page: 1
}
let getTags = wxRequest.getRequest(Api.getTags(params))
getTags.then(res => {
if (res.data.length) {
self.setData({
tagsList: res.data
})
}
})
},
// 搜索
formSubmit(e) {
var url = '../list/list'
var key = ''
if (e.currentTarget.id == "search-input") {
key = e.detail.value
} else {
key = e.detail.value.input
}
if (key) {
url = url + '?search=' + key
wx.navigateTo({
url: url
})
} else {
wx.showModal({
title: '提示',
content: '请输入内容',
showCancel: false,
})
}
},
Adbinderror(e) {
this.setData({
listAdsuccess: false
})
}
})

search.json添加以下代码:

{
"navigationBarTitleText": "搜索"
}

search.wxml添加以下代码:

<import src="../../templates/copyright.wxml" />
<!-- 搜索框 -->
<form catchsubmit="formSubmit" catchreset="formReset" id="search-form">
<view class="search-pancel">
<view>
<input value="" id="search-input" name="input" confirm-type="search" class="search-input" placeholder="搜索你感兴趣的内容..." bindconfirm="formSubmit"></input>
<button class="search-button" form-type="submit" size="mini" plain="true">
<icon type="search" color="#959595" size="16" />
</button>
</view>
</view>
</form>

<!-- 热门标签 -->
<view class="tags" wx:if="{{tagsList.length}}">
<view class='common-subtitle'>
<view class='common-subtitle-left'>热门标签</view>
<navigator url="../postags/postags" open-type="navigate" hover-class="none">
<view class='common-subtitle-right'>更多</view>
</navigator>
</view>
<!-- 标签列表 -->
<view class='tagsname-container'>
<block wx:key="id" wx:for="{{tagsList}}">
<view class="tagsname">
<navigator url="../list/list?tagId={{item.id}}&tagName={{item.name}}&tagPostsCount={{item.count}}&tagCover={{item.tag_thumbnail_image}}" open-type="navigate" hover-class="none">
<view class='tagsname-name'>#{{item.name}}</view>
</navigator>
</view>
</block>
</view>
</view>
<view class="copyright">
<template is="tempCopyright" data="{{copyright}}" />
</view>

search.wxss添加以下代码:

/* 搜索框样式 */
.search-pancel {
padding: 40rpx 40rpx 40rpx;
background-color: #fff;
border-bottom: 16rpx solid #f5f7f7;
}

.search-pancel>view {
display: flex;
flex-direction: row;
align-items: center;
background: #f5f6f7;
}

.search-input {
background: #f5f6f7;
padding: 36rpx 0 36rpx 32rpx;
min-height: 1rem;
font-size: 30rpx;
height: 48rpx;
width: 80%;
text-align: left;
}

.search-button {
border: none !important;
background: none;
margin: 0 !important;
}

.search-button::after{
border: none;
}

.search-button icon {
vertical-align: middle;
margin-top: -4rpx;
}

.share-button {
border: 1px solid #eee !important;
color: #296fd0 !important;
left: 10rpx;
height: 100rpx;
width: 200rpx;
}
/* 热门标签 */
.tags {
border-bottom: 16rpx solid #f5f7f7;
background: #fff;
}

.tagsname-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 40rpx;
padding-bottom: 16rpx;
}

.tagsname {
height: 72rpx;
border-radius: 36rpx;
background: #f5f7f7;
padding: 0 36rpx;
margin-right: 24rpx;
margin-bottom: 24rpx;
}

.tagsname-name {
color: #4c4c4c;
font-size: 26rpx;
line-height: 72rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 模块标题样式 */
.common-subtitle {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 130rpx;
padding: 0 40rpx;
background: #fff;
}

.common-subtitle-left {
font-size: 34rpx;
color: #333;
font-weight: 500;
}

.common-subtitle-right {
font-size: 26rpx;
font-weight: 400;
color: #959595;
margin-right: 6rpx;
}

以上是以微信小程序为例子,我们无论是微信小程序端,还是百度小程序端,都需要在小程序根目录app.json中定义一下search页面,在原文件"pages/postags/postags"上方添加以下代码:

"pages/search/search",

添加后的整体代码如下图所示:

微幕小程序增强版自定义Search页面

如何使用

在需要使用的地方,使用下方代码即可:

<navigator url="../search/search" open-type="navigate" hover-class="none">

代码下载

为了方便大家使用,菜鸟库在下面将微信小程序和百度小程序所用的search打包了,大家可以自行下载使用。

下载权限

查看

  • ¥{{right.value}}
    {{right.value}}
    免费下载
    评论后下载
    登录后下载

    0″>

  • {{attr.name}}:
您当前的等级为

没有下载权限,请

登录


评论之后下载


支付积分以后下载


支付费用以后下载


升级会员

您有每天免费下载所有资源次的特权,今日剩余

已取得下载权限

给TA买糖
共{{data.count}}人
人已赞赏
技术教程

宝塔面板设置了防盗链不生效如何解决

2020-7-29 4:17:32

技术教程

完美解决Cloudreve安装完成后域名访问首页空白

2020-7-29 4:22:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
this is a cache: 0.01986