点击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'
})
},
4.运行截图:
点击input输入框实现页面跳转功能

点击input输入框实现页面跳转功能
小程序教程地址:小程序教程集合地址
如果大家对文章有什么问题或者疑意之类的、想要源代码的、想看更多此类文章的,都可以可以加我订阅号,订阅号上面我会定期更新最新博客和资源。 如果嫌麻烦可以直接加我wechat:lzqcode
点击input输入框实现页面跳转功能