实现微信小程序搜索框跳转的相关代码

小程序搜索框跳转可以让小程序搜索更加便捷，但是很多人不知道怎样开发和使用，所以接下来就跟着小编一起来看一看实现微信小程序搜索框跳转的相关代码。

首先来看一看小程序搜索框跳转的效果：

微信小程序搜索框跳转实现代码：页面结构

搜索：{{search.searchvalue}}

{ { item。team _ name } } { { item。team _ intr } }。射流研究…

page({ data : { search : { search value : }，showclearbtn : false }，searchresult : [] }，onload : function(options){//页面初始化选择为页面跳转所带来的参数}，onready:function{ //微信小程序页面渲染完成}，onshow:function{ //页面显示}，onhide:function{ //页面隐藏}，onunload:function{ //页面关闭}, //输入内容时searchactivechangeinput :函数(e){ const val=e . detail。价值；这个。setdata(“{”搜索。showclearbtn ' : val！='' ?true : false，' search.searchvalue' : val }) }，//清除搜索内容搜索活动更改清除：功能(e){这。设置数据(“{”搜索。showclearbtn ' : false，' search.searchvalue': '' }) }，//聚集时focussearch :函数{ if(this。数据。搜索。搜索值){ this。设置数据(“{”搜索。showclearbtn ' : true })} }，//搜索提交search submit :函数{ const val=this。数据。搜索。搜索值；if(val){ const that=this，app=getappwx . show toast({ title : '搜索中，图标： ' loading ' })；wx。请求({ url : app。数据。api _ url '搜索团队'，data: {关键字： val，user _ id : app。数据。我的信息。user _ id }，method: 'get '，//options，get，head，post，put，delete，trace，connect//header 3360 { }，//设置请求的表头成功：函数(res){//成功让搜索结果=res . data。数据；const len=search result . length for(设i=0；i leni){搜索结果[i][' team _ avator ']=app。数据。static _ source搜索结果[i][' team _ avator ']；}那个。setdata({ search result : search result，' search.showclearbtn' : false，}) }、fail: function { //fail }、complete : function {//complete wx。隐藏吐司；} }) } }})。数据

{ 'navigationbartitletext': '搜索团队'}。页面样式表

第{ background-color : # efef 4；}.person _ _ top _ _ wrapper { width :；盒子大小：边框盒子；填充-左：28 rpx填充-右：28 rpxpadding-top :24 rpx；填充-底部：24 rpx边框-顶部：1 rpx实心# e5e 5e 5；边框-底部：1 rpx实心# e5e 5e 5；高度：178 rpxmargin-top :30 rpx；背景-color : # fff；相对位置：}.person _ _ top _ _ avatar { border :1 rpx solid # e5e 5e 5；宽度：130 rpx h8 :130 rpx隐藏飞越：盒子大小：内容盒；向左浮动：}.person _ _ top _ _ avatar image { width :130 rpx；高度：130 rpx border-半径：7 rpx}.person _ _ top _ _ user info { right :0；飞越：隐藏；位置：left :182 rpx box-size : border-box；top :44 rpxcolor : # 000 ' font-family : '微软雅黑；font-weight :500；bottom:44rpx}。person _ _ top _ _用户信息。h2 { width :300 rpx；高度：90rpx线高：90 rpxfont-size :36 rpx}.person _ _ top _ _用户信息。h3 { width :300 rpx；height :60 rpx font-size :30 rpx；}.person _ _ top _ _用户信息。h4 { width :300 rpx；height :30 rpx font-size :24 rpx；}.{内容： }之后的person _ _ top _ _ user info :显示器：内联块；高度： 17rpxwidth: 17rpx边框-宽度： 2 rpx 2 rpx 0 0border-color: #c6c6cb .边框样式：实心；-webkit-transform:矩阵(0.71,0.71,-0.71,0.71,0,0);变压器：矩阵(0.71,0.71,-0.71,0.71,0,0);位置：前：名50%；margin-top :-10 rpx；right:30rpx}。person _ _ top _ _ user info image { display : inline-block；height : 34 rpx width : 34 rpx top : 50%；margin-top :-17 rpx；位置：right:58rpx}按钮：在{ border:none}。person _ _ top _ _ wrapper { margin-top :0；border-top :无；}

下面是题目的开头。九宫格怎么操作？标题到此结束

微信小程序的布局有很多，九宫格是使用比较广泛的一个，因为九宫格的页面可以让用户操作更方便。接下来我们来了解一下用微信小程序开发九宫格的具体步骤。

先看九宫格的完整样子。

小程序目录树如下所示。在结构树中，我们可以看到wviewcolumn下有九个wviewrow。我们不用担心wviewcolumn上面是什么。这些是画布上的内容，用于设计辅助。9个wviewrow是9个方块中的实际元素项。

图片和文字在每一项上下排列，九项排列成新行。那么这些东西是怎么工作的呢？当然是flexbox的作用。下面详细介绍了flexbox属性对布局的影响。

首先介绍项目的flexbox属性。

其中显示器必须是柔性的。flex-direction=row表示主轴x水平，即xy坐标系原点在视图左上角，x轴右，y轴下。如果flex-direction=column，则x轴向下，y轴向右。在我们的实际应用中，只要我们使用row，就应该能够满足大部分的布局要求。

flex-wrap=wrap表示包装。这个属性决定了内部组件的图文是排成两行的。

调整内容=空白.此属性指示每行中元素的间距。由于此示例中的第一行是图片，第二行是文本，因此此属性没有效果。稍后将在课程中介绍。

align-items=center确定y轴上的排列，y轴垂直居中。结合对齐-内容=中心，内部元素将水平和垂直居中。

align-content=space-round表示图片和文本之间的行距。上下都有空格，图片和文字之间也有空格。顶部和底部的空白是图片和文本之间空白的一半大小。

上述属性的设置决定了内部元素在长轴x和短轴y上的排列和间隔.当我们开始使用该工具时，我们可以更多地更改每个属性的值，以查看布局效果。然后将自动生成的wxml和wxss粘贴到微信开发者工具中预览。

然后让我们看看比较外层视图的flexbox属性设置

三个属性，显示，伸缩方向，伸缩换行，告诉浏览器我要用伸缩布局，水平排列换行。

对齐内容、对齐项目和对齐内容都是弹性开始，这决定了内部组件在x轴上从原点向右排列，在y轴上从原点向下排列。这决定了九个项目是从左上角排列到x轴和y轴的。当然，我们也可以把这三个属性设置为中心，也就是说从视图中心向四周排列，或者我们可以做9个正方形。

flexbox属性的组合有很多，在实际开发中结合使用这个工具可以达到事半功倍的效果。通过改变工具中的属性，你可以得到你所看到的就是你所得到的。

如果工人想尽比较大努力，他们必须首先磨利工具。掌握一个工具的使用，必然会提高我们的开发效率。当您开始使用这个小程序开发工具时，请更多地更改flexbox的属性以查看布局效果。完全掌握了，就会产生意想不到的效果。

以上是为微信小程序开发九宫格的全过程。小编已经从代码到操作步骤详细解释过了。希望大家看完能掌握方法。更多相关信息，请关注源社网小节目频道。

这是第一段的结尾。下面是如何在比较后添加一段微信小程序来开发九宫格。目前已经获得了537网友的青睐！正文到此结束