html 顶部悬浮搜索框代码,小程序实现悬浮搜索框

最新推荐文章于 2026-05-10 16:59:11 发布

转载最新推荐文章于 2026-05-10 16:59:11 发布 · 951 阅读

标签

#html 顶部悬浮搜索框代码

这篇博客展示了如何在小程序中实现一个悬浮搜索框，包括UI代码和JS代码的详细实现。当页面滚动时，搜索框始终保持在顶部。文章还提供了一组示例图片，帮助读者更好地理解和应用这些代码。

本文实例为大家分享了小程序实现悬浮搜索框的具体代码，供大家参考，具体内容如下

悬浮搜索框是当数据界面不断滚动时，搜索框始终悬浮在最上方。来看一下效果图

UI代码

示例

清空

样式

.search-wrapper {

position: fixed;/*悬停搜索框的关键样式*/

top: 0px;

left: 0;

width: 100%;

z-index: 999;

}

.search-panel {

background-color: #f50;

}

.search-section {

padding: 5px 0px;

display: flex;

flex-direction: row;

}

.search-demo {

padding: 5px;

flex-direction: row;

background-color: #eee;

padding-left:42px;

align-items: flex-start;

}

.search-input-wrapper {

flex: 8;

padding: 5px;

background-color: #eee;

border-radius: 3px;

}

.search-input {

padding-top: 5px;

}

.search-clear {

float: right;

width: 32px;

height: 32px;

z-index: 998;

}

.search-button-wrapper {

padding-left: 5px;

padding-right: 5px;

padding-top:5px;

}

.search-button {

flex: 1;

border: none !important;

color: white !important;

width: 32px;

height: 32px;

}

JS代码

//获取应用实例

var app = getApp()

Page({

data: {

barcode: "",

hiddenLoading: true,

hiddenData: true,

hiddenDropdown: true,

hiddenClear:true,

demoData: 'XXXX',

Product: {},

bindBarcodeInput: function (e) {

this.setData({

barcode: e.detail.value

})

bindBarcodeFocus: function (e) {

this.setData({

hiddenDropdown: false,

hiddenClear:false

})

bindBarcodeBlur: function (e) {

this.setData({

hiddenDropdown: true,

hiddenClear:true

})

scan: function (e) {

var that = this;

wx.scanCode({

success: function (res) {

that.setData({

barcode: res.result

});

that.query(e);

fail: function () {

that.setData({

barcode: "",

hiddenData: true

});

complete: function () {

// complete

}

})

setDemoData: function (e) {

this.setData({

barcode: this.data.demoData

});

clear: function (e) {

this.setData({

barcode: "",

hiddenData: true

});

query: function (e) {

var url = "https://www.xxx.com/query";//查询数据的URL

var that = this;

if (that.data.barcode == undefined

|| that.data.barcode == null

|| that.data.barcode.length <= 0) {

that.setData({ hiddenData: true });

wx.showToast({

title: '请输入条码',

image: '/images/fail.png',

duration: 2000

});

return;

}

wx.request({

url: url,

data: { barcode: that.data.barcode },

method: 'GET',

success: function (res) {

var result = res.data;

if (result.Status != 0) {

that.setData({ hiddenData: true });

wx.showToast({

title: result.Message,

image: '/images/fail.png',

duration: 2000

})

return;

}

that.setData({ Product: result.Data, hiddenData: false });

wx.showToast({

title: "获取数据成功",

image: '/images/ok.png',

duration: 2000

})

fail: function (e) {

var toastText = '获取数据失败' + JSON.stringify(e);

that.setData({

hiddenLoading: !that.data.hiddenLoading,

hiddenData: true

});

wx.showToast({

title: toastText,

icon: '',

duration: 2000

})

complete: function () {

// complete

}

})

}

})

用到的几个图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。