微信小程序学习之搜索框

小新110

于 2025-05-14 11:09:03 发布

阅读量430

点赞数 1

文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/cau_eric/article/details/147949613

版权

1、第一步，我们在index.json中引入vant中的搜索框控件：

{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index"
  }
}

2、第二步，直接在index.wxml中添加布局：

<view class="index-container">
  <view class="header">
    <van-search value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" />
  </view>
</view>

3、在index.wxss中添加样式：

.header {
  background-image: -webkit-linear-gradient(botton, #f1503B, #c82519 50%);
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  width: 100%;
  height: 190px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
}

4、完工，看效果：