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

注册界面
- - 效果展示：
- 所用到的一些属性：
- - 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中的属性

scroll-x：是否允许横向滚动
scroll-y: 是否允许横向滚动
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="data:image/a.jpg"></image>
<view>图片1</view><image src="data:image/b.jpg"></image>
<view>图片2</view><image src="data:image/c.jpg"></image>
<view>图片3</view><image src="data: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的一些响应事件。后续学到了再去更新。。。。。。

号召

这里我也建立了个QQ群1098392728，希望不管是大学生还是在职的IT工作人士可以共同努力学习。群内有一些IT书籍可以免费给大家观看。如果有需要博主会将某云的50gIT书籍免费分享给大家

微信小程序控件（入门实例）相关推荐

史诗手册！微信小程序新手自学入门宝典！你想要的都在这里
一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...
【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...
微信小程序使用WeUI入门教程
微信小程序使用WeUI入门教程在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子.所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用 ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
知乎爆赞！4504页《微信小程序零基础入门开发文档》+《小程序实战笔记》，你学废了吗？
前言微信小程序作为近几年"微服务"的杰出代表,应用十分广泛.小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
【微信小程序】开发入门篇（一）
前言 ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ [微信小程序]开发入门篇(一) 一.小程序简介 (1)小程序与普通网页开发的区别二.第一个小程序 (1 ...

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

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

注册界面

效果展示：

所用到的一些属性：

wxml代码：

wxss代码：

购物界面：

所用到的一些属性

轮播图制作：

所用到的一些属性

可滚动视图与轮播图综合

效果图

wxml代码

wxss代码：

总结：

号召

微信小程序控件（入门实例）相关推荐

最新文章

热门文章