微信小程序学习之搜索框

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

相关推荐
头疼的程序员9 分钟前
MySQL学习之触发器
学习·mysql
ThreeYear_s1 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白3 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
新中地GIS开发老师4 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
Studying 开龙wu5 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者5 小时前
HTML版英语学习系统
学习·html
nenchoumi31195 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人
NULL指向我5 小时前
香橙派3B学习笔记9:Linux基础gcc/g++编译__C/C++中动态链接库(.so)的编译与使用
笔记·学习
ThreeYear_s6 小时前
基于FPGA的PID算法学习———实现PID比例控制算法
学习·算法·fpga开发
_李小白7 小时前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d