微信小程序控件（入门实例）

本文主要是介绍微信小程序控件（入门实例），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序控件（入门实例）

•  
• 注册界面
• • • • • 效果展示：
      • 所用到的一些属性：
      • • wxml代码：
        • wxss代码：
• 购物界面：
• • • • 所用到的一些属性
• 轮播图制作：
• • • • 所用到的一些属性
• 可滚动视图与轮播图综合
• • • • • 效果图
        • wxml代码
      • wxss代码：
• 总结：
• 号召

效果展示：

所用到的一些属性：

1. view标签：视图容器（具有换行的功能）
2. button 按钮:


3. icon:图标（微信自带的一些图标）


4. input：

wxml代码：

<view class="name">注册信息填写</view>
<icon type="info"></icon>
<text class="yonghu"  >用户名：</text>
<input placeholder="请输入" class="yonghutxt" maxlength='6'></input>
<icon type="info"></icon>
<text class="mima">密码：</text>
<input placeholder="请输入密码" password class="mimatxt" maxlength='6'></input>
<icon type="info"></icon>
<text class="id"  type="idcard" >身份证：</text>
<input placeholder="请输入" class="idtxt" maxlength='18'></input>
<button type="primary"  >题交</button>
<button type="primary" >重填</button>

wxss代码：

//控制注册信息填写
.name{
 
  font-weight: bold;
  font-style: oblique;
  text-align: center;
  color: blue;
  margin-bottom: 50px;
}
//控制用户名
.yonghu{
  font-weight: bold;
 

}
//控制密码
.mima{
  font-weight: bold;
  margin-bottom: 50px;
}
//控制身份证
.id{
  font-weight: bold;
}
//控制用户input
.yonghutxt{
  margin-top: 20px;
}
//控制密码input
.mimatxt{
  margin-top: 20px;
}
//控制身份证input
.idtxt{
  margin-top: 20px;
}
//控制按钮的外边距
button{
  margin-bottom: 100px;
}

制作该界面需要用到scroll-view可滚动视图区域

所用到的一些属性

scroll-view中的属性

1. scroll-x：是否允许横向滚动
2. scroll-y: 是否允许横向滚动
3. enable-back-to-top：iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

navigator（可理解为html中的a标签，超链接）
代码中的这些navigator默认时竖着放的，==需要为class="scrool-view"设置display: flex;==这样才能横向摆放

wxml

<scroll-view  class="menu" scroll-x="true">
<view class="scrool-view">
<navigator url="">家具</navigator>
<navigator  url="">零食</navigator>
<navigator  url="">酒水</navigator>
<navigator url="">气电</navigator>
<navigator url="">婴儿用品</navigator>
</view>
</scroll-view>
<scroll-view class="info" scroll-y enable-back-to-top>

<image src="image/a.jpg"></image>
<view>图片1</view>


<image src="image/b.jpg"></image>
<view>图片2</view>


<image src="image/c.jpg"></image>
<view>图片3</view>


<image src="image/d.jpg"></image>
<view>图片4</view>

</scroll-view>

wsxx：（样式）

.menu{
  background-color: aqua;

} 
.scrool-view{
  
  display: flex;
  white-space: nowrap;
  height: 60rpx;
  font-size: 30rpx;
  line-height: 60rpx;
}
.scrool-view navigator{
margin: 0px 30rpx;
  font-weight: bold;

}
.info view{
  text-align: center;
 background-color: tomato;
}
.info{
  height: 100%;
}

轮播图制作需用用到滑块视图容器 ----swiper
以及其内部的 swiper-item。

所用到的一些属性

1. autoplay：用于让滑块自动滚动
2. interval：用于设置自动切换时间间隔
3. indicator-dot：是否显示面板指示点
4. indicator-color：指示点颜色

indicator-dot指的就是图上的内容

<swiper class="swiper" autoplay interval="2000" indicator-dots indicator-color="red" >
<swiper-item >
<image src="shoping1"></image>
</swiper-item>
<swiper-item>
<image src="shoping2"></image>
</swiper-item>
<swiper-item>
<image src="shoping3"></image>
</swiper-item>
<swiper-item>
<image src="shoping4"></image>
</swiper-item>
</swiper>

效果图

wxml代码

//1.菜单栏
<view class="scrool-view">
<navigator url="">家具</navigator>
<navigator  url="">零食</navigator>
<navigator  url="">酒水</navigator>
<navigator url="">气电</navigator>
<navigator url="">婴儿用品</navigator>
</view>
//2.轮播图
<swiper class="swiper" autoplay interval="2000" indicator-dots indicator-color="red"  >
<swiper-item >
<image src="shoping1"></image>
</swiper-item>
<swiper-item>
<image src="shoping2"></image>
</swiper-item>
<swiper-item>
<image src="shoping3"></image>
</swiper-item>
<swiper-item>
<image src="shoping4"></image>
</swiper-item>
</swiper>

//3.可滚动视图

<scroll-view class="info" scroll-y enable-back-to-top>

<image src="a.jpg"></image>
<view>图片1</view>


<image src="b.jpg"></image>
<view>图片2</view>

<image src="c.jpg"></image>
<view>图片3</view>

<image src="d.jpg"></image>
<view>图片4</view>

</scroll-view>

wxss代码：

.swiper image{
  width: 100%;
}

.scrool-view{
  background-color: coral;
  display: flex;
  white-space: nowrap;
  height: 60rpx;
  font-size: 30rpx;
  line-height: 60rpx;
}
navigator{
margin: 0px 30rpx;
  font-weight: bold;

}
.info view{
  text-align: center;
 background-color: tomato;
}
.info{
  height: 100%;
}

最基础的一些界面设置，基本上与html，css差不多。学了将近一个多月，感觉能够做出了这种效果比算法好玩多了。上述的一些实现仅仅需要用到一些微信开发文档的一些内容就能实现，，目前还没有实现类似与JavaScript的一些响应事件。后续学到了再去更新。。。。。。

这篇关于微信小程序控件（入门实例）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！