微信小程序学习之搜索框

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、完工,看效果:

学习能力强的,可以直接看vant官网的文档:

相关推荐
moxiaoran57531 小时前
uni-app学习笔记二十九--数据缓存
笔记·学习·uni-app
pop_xiaoli3 小时前
OC—UI学习-2
学习·ui·ios
Lin Hsüeh-ch'in3 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
恰薯条的屑海鸥4 小时前
零基础在实践中学习网络安全-皮卡丘靶场(第十五期-URL重定向模块)
学习·安全·web安全·渗透测试·网络安全学习
moxiaoran57536 小时前
uni-app学习笔记三十--request网络请求传参
笔记·学习·uni-app
嘉陵妹妹6 小时前
深度优先算法学习
学习·算法·深度优先
乖乖是干饭王7 小时前
Linux系统编程中的_GNU_SOURCE宏
linux·运维·c语言·学习·gnu
待什么青丝8 小时前
【TMS570LC4357】之相关驱动开发学习记录2
c语言·arm开发·驱动开发·单片机·学习
行云流水剑8 小时前
【学习记录】如何使用 Python 提取 PDF 文件中的内容
python·学习·pdf
chaosama8 小时前
微信小程序带参分享、链接功能
微信小程序·小程序