微信小程序学习之搜索框

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官网的文档:

相关推荐
行云流水剑1 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
门前云梦3 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
0x7CF4 小时前
QT3D学习笔记——圆台、圆锥
qt·学习·3d
qq_386322695 小时前
华为网路设备学习-24(路由器OSPF - 特性专题)
学习·华为·智能路由器
viperrrrrrrrrr75 小时前
大数据学习(132)-HIve数据分析
大数据·hive·学习
2401_878454536 小时前
node.js的初步学习
学习·node.js
Clair-Sean7 小时前
【JavaSE】多线程基础学习笔记
笔记·python·学习
moxiaoran57537 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
不做无法实现的梦~8 小时前
rm视觉学习1-自瞄部分
学习
꧁坚持很酷꧂8 小时前
FreeRTOS学习02_任务管理
stm32·学习