搜索页面静态实现

最新推荐文章于 2023-11-16 16:05:01 发布

九品印相

最新推荐文章于 2023-11-16 16:05:01 发布

阅读量82

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_68935893/article/details/133871213

版权

文章描述了一个微信小程序中的搜索功能，包括输入框获取用户输入、取消按钮控制显示以及相关生命周期函数的实现。

摘要由CSDN通过智能技术生成

<view class="search_row">
    <input type="text" model:value="{{inputValue}}" placeholder="请输入商品关键字" bindinput="handleInput"/>
    <button hidden="{{!isFocus}}">取消</button>
</view>
<view class="search_content"></view>

// pages/search/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputValue:"",//输入框的值
    isFocus:false   //取消按钮 是否显示
  },
  //处理input事件
  handleInput(e){
    const {value}=e.detail;
    console.log(value);
    if(!value.trim()){
        this.setData({
            isFocus:false
        })
        return;
    }
    this.setData({
        isFocus:true
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

page{
    background-color: #f9f9f9;
    padding-top: 20rpx;
}

.search_row{
    height: 50rpx;
    display: flex;
    input{
        background-color: #ffffff;
        flex: 1;
        height: 100%;
        padding-left: 30rpx;
    }
    button{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 110rpx !important;
        font-style: 26rpx;
        padding: 0;
        margin: 0 10rpx;
        height: 100%;
    }
}
.search_content{

}