专栏首页强仔仔点击input输入框实现页面跳转功能

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/linzhiqiang0316/article/details/79858804

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.运行截图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SpringBoot中使用redis事务

    首先从使用springboot+redis碰到的一个问题说起。在前几篇文章中介绍了用SpringBoot+redis构建了一个个人博客。在刚开始远行的时候发现发...

    用户1149268
  • MQ消息队列应用研究

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    用户1149268
  • 【面试题】SpringCloud架构中如何保证定时任务只在一个服务在执行

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    用户1149268
  • CSS border dashed属性虚线间隔不可控的解决方法

    可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:

    德顺
  • 相对路径,‘/’,‘./’,‘../’

    python3相对路径 “/” 前有没有 “.” ,有几个“.”,意思完全不一样。

    于小勇
  • wordpress发布文章报错HTTP 564解决办法

    关于wordpress发布文章更新文章经常报错http 564解决办法。我做网站三年了,站虽然不大但是也收录了5000多篇内容,放弃wordpress吧,wor...

    主机优惠教程
  • 一个基于Flask和MongoDB的CMS内容管理系统

    Quokka 世界上最快乐的CMS内容管理系统 封面即为Quokka原意:产于澳大利亚的短尾矮袋鼠 Quokka是一个灵活地运用Python、Flask、Mon...

    Python中文社区
  • Laravel使用gregwar/captcha生成验证码

    laravel框架自身并不携带验证码类,我这里采用开源的gregwar/captcha,来做验证码,并判断是否可以登录。

    Debug客栈
  • 知识图谱可视化前奏之d3.js

    0.说在前面1.d3.js初识2.绘制完整的柱形图3.让图表动起来4.浅析Update、Enter、Exit5.交互式操作6.作者的话

    公众号guangcity
  • AndroidIPC机制(3)-AIDL

    AIDL 意思即 Android Interface Definition Language,翻译过来就是Android接口定义语言,是用于定义服务器和客户端通...

    叶应是叶

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动