×

小程序

微信小程序(一),搜索栏的实现

我的笔记 我的笔记 发表于2019-07-03 20:12:09 浏览3318 评论0

抢沙发发表评论

首先新建一个微信小程序,设置app.json的背景色

{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#41be57",
"navigationBarTitleText": "豆瓣评分",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap.json"
}

显示如下图

image.png

然后我们在index.wxml开始写搜索栏

首先新建一个目录叫做components,然后依次在里边新建一个组件,叫searchbar

image.png

然后依次在四个文件中敲入一下代码


searchbar.js

// components/searchbar/searchbar.js
Component({
/**
   * 组件的属性列表
   */
properties: {
isnavigator:{
type:Boolean,
value:false
}
},

/**
   * 组件的初始数据
   */
data: {

},

/**
   * 组件的方法列表
   */
methods: {

}
})


searchbar.wxml

这里判断就不说了,他是判断组件里的属性,也就是上边那个文件的isnavigator属性



<view class='searchbar'>
<navigator wx:if="{{isnavigator==true}}" class='search-navigator' url="/pages/search/search"></navigator>
<view  wx:else class="search-input-group">
<input class='search-input' placeholder='搜索'/>
</view>
</view>


searchbar.wxss

关于这个图片为什么那么长,是因为微信小程序不允许直接写图片,只让用base64编码后的图片和网络图片(base64编码的图片只能是小图片)

.searchbar{
background-color: #41be57;
padding: 20rpx;
}

.search-navigator{
width: 100%;
height: 60rpx;
background-color: white;
border-radius: 10rpx;
background-image: url("data:image/png;base64,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");
background-position: center center;
background-repeat: no-repeat;
background-size: 6%
}

.search-input-group{
width: 100%;
height: 60rpx;
background-color: white;
border-radius: 10rpx;
padding: 10rpx;
box-sizing: border-box;
}

.search-input-group .search-input{
min-height: 40rpx;
height: 40rpx;
font-size: 12px;
}

这样这个组件就建好了

在index页面引用的话先在index.json敲入,把它引入进来

index.json

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


然后在index.wxml中

index.wxml

<searchbar isnavigator="{{true}}"></searchbar>
<view>这是首页</view>

结果如下

image.png


然后新建一个页面,叫做search

image.png

同样在search.json中把searchbar组件引入

再在search.wxml中敲入

search.wxml

<searchbar></searchbar>
<view>搜索页面</view>


细心的同学能发现首页的searchbar标签有isnavigator={{true}},这里就是区别是在组件的属性中根据判断,来展示不同的标签,来达到不同页面的展示效果


最后结果就是

image.png

当点击红框时,会跳转到search页面,并且搜索栏可以输入文字

image.png

这就是最后的结果。。。



我的笔记博客版权我的笔记博客版权