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

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

4.运行截图：

小程序教程地址：小程序教程集合地址

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