前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >点击input输入框实现页面跳转功能

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

作者头像
林老师带你学编程
发布2019-05-25 21:17:38
3.4K0
发布2019-05-25 21:17:38
举报
文章被收录于专栏:强仔仔

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1433514

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页面代码:

代码语言:txt
复制
intoSearchFunc: function (e) {
代码语言:txt
复制
  wx.navigateTo({
代码语言:txt
复制
    url: '../search/search'
代码语言:txt
复制
  })
代码语言:txt
复制
},

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

4.运行截图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年04月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档