点击input输入框实现页面跳转功能

曾经终败给现在 2022-05-27 00:52 570阅读 0赞

1.wxml页面代码：

< view  class = "section\_\_title">

< input  class = "center-input input-search"  type = "text"  placeholder = "搜索商品"  placeholder-class = "placeholder-class"  bindfocus = "intoSearchFunc" / >

</ view >

2.wxss页面代码：

.center-input \{  width:  100% ; height:  30px ; font:  16px / 1  "microsoft yahei" ; color: \#333 \}

/\* input::-ms-input-placeholder\{text-align: center;\}

input::-webkit-input-placeholder\{text-align: center;\} \*/

.placeholder-class \{  text-align:  center ;\}

input \{  border: 1px  solid  white ; background-color: transparent ; text-align:  center ;\}

.left-overflow \{  overflow-x:  hidden ; overflow-y:  hidden ;\}

.input-search \{

background-image:  url ( http://211.159.165.227/my/search.png ); /\*设置小图标\*/

background-size:  25px  25px ; /\*小图标的大小\*/

background-position:  65%  4px ; /\*小图标在input的位置\*/

background-repeat:  no-repeat ; /\*背景小图标不重复\*/

3.js页面代码：

intoSearchFunc:  function  (e) \{

wx.navigateTo(\{

url:  '../search/search'

\})

\},

js部分代码可以参考微信官方文档: [https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html\#wxredirecttoobject][https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_wxredirecttoobject]

4.运行截图：

![302_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476][]

![304_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476][]

**小程序教程地址：[小程序教程集合地址][Link 1]**

**如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的，都可以可以加我订阅号，订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat：lzqcode**

![303_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476][]

[https_developers.weixin.qq.com_miniprogram_dev_api_ui-navigate.html_wxredirecttoobject]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxredirecttoobject
[302_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476]: https://note.youdao.com/yws/api/group/67516516/noteresource/E4EB53C5263745D0A70FB65041B90668/version/302?method=get-resource&shareToken=D8E5FC14752E4B068759D675555B0FB9&entryId=192425476
[304_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476]: https://note.youdao.com/yws/api/group/67516516/noteresource/AAD56595AC3D46788DBDB58C2AB8BB1B/version/304?method=get-resource&shareToken=D8E5FC14752E4B068759D675555B0FB9&entryId=192425476
[Link 1]: https://blog.csdn.net/linzhiqiang0316/article/details/79858852
[303_method_get-resource_shareToken_D8E5FC14752E4B068759D675555B0FB9_entryId_192425476]: https://note.youdao.com/yws/api/group/67516516/noteresource/61CC6DE658764AB08DF0FF11C5AF6685/version/303?method=get-resource&shareToken=D8E5FC14752E4B068759D675555B0FB9&entryId=192425476