微信小程序组件篇实战
实现效果如下:
实现代码如下:
index.wxml:
<!--index.wxml-->
<view class="container">
<view class = "selection">
<swiper indicator-dots="true"
autoplay="true" interval="" duration="">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="" height=""/>
</swiper-item>
</block>
</swiper>
</view> <view class = "selection">
<view class = "header">
<text>精品推荐</text>
<text class = "all_text">精品推荐</text>
</view> <view class = "content">
<!--for循环-->
<view class = "content_item" wx:for = "{{content_item}}">
<image src="../../images/3.png"/>
<view class = "text_item">
<text>我是标题哟哟!!!</text>
</view>
</view>
</view>
</view> <view class = "selection">
<view class = "header">
<text>热门评测</text>
<text class = "all_text">全部评测</text>
</view> <view class = "list_item" wx:for = "{{list_item}}">
<view class = "big_image">
<image src="../../images/4.png" class = "big_image"/>
<image src="../../images/2.png" class = "avater" />
</view>
<view class = "list_item_title_text">
<text>思思思思思思思思思思思思思思思思思思思思思思思思思思</text>
</view>
<view class = "list_item_content_text">
<text>思思思思思思思思思思思思思思思思思思思</text>
</view>
</view>
</view>
</view>
index.wxss:
.header{
border-left-width: 2px;
border-left-color: green;
border-left-style: solid;
/*flex布局*/
display: flex;
/*两端对齐*/
justify-content: space-between;
/*居中对齐*/
align-content: center;
padding-left: 10rpx;
padding-right: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
} .all_text{
color: green;
font: 10px;
} .content{
display: flex;
/*换行*/
flex-wrap: wrap;
/*方向*/
flex-direction: row;
/*水平方向居中对齐*/
justify-content: center;
} .content_item{
width: %;
height: 250rpx;
background-color: darkgoldenrod;
margin: 5px;
/*绝对定位*/
position: relative;
} /*设置图片样式*/
.content_item image{
width: %;
height: %;
} .text_item text{
/*相对布局*/
position: absolute;
bottom: 0px;
color: white;
font: 10px;
/*设置渐变 参数一:从哪开始,参数二:设置颜色 黑色 参数三:到哪哪 透明*/
background: -webkit-linear-gradient(bottom,rgba(, , , 0.5),rgba(, , , ));
height: 125rpx;
width: %;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: %;
padding-right: %;
} /*列表*/
.list_item{
height: 500rpx;
width: %;
/*position: relative;*/
background: gainsboro;
} .big_image{
height: 300rpx;
width: %;
position: relative;
} /*列表大图*/
/*.big_image image{
height: 100%;
width: 100%;
}*/
/*.big_image{
height: 100%;
width: 100%;
}*/ .list_item_text text{
height: 200rpx;
width: %;
} .avater{
height: 100rpx;
width: 100rpx;
/*弧度*/
border-radius: %;
bottom: -50rpx;
right: 50rpx;
/*绝对定位*/
position: absolute;
} .list_item_title_text{ color: black;
font: 15px;
margin-top: 70rpx;
padding-left: 10rpx;
padding-right: 10rpx;
} .list_item_content_text{
color: lightgray;
font: 8px;
padding-left: 10rpx;
padding-right: 10rpx;
margin-top: 10rpx;
}
里面有设置相应代码注释哟!!!一起学习..加油!!!
微信小程序组件篇实战的更多相关文章
- 微信小程序-组件篇
一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买
作者图书京东链接,请点击------>>> **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...
- 微信小程序电商实战-首页(上)
嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图: 架构图. ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序入门与实战(最新完整版)教程
微信小程序入门与实战(最新完整版) 如图地址:下载地址在底部 |- 第1章 什么是微信小程序? - 0 B |- 第2章 小程序环境搭建与开发工具介绍 - 0 B |- 第3章 从一个简单的“欢迎“页 ...
- 微信小程序支付接入实战
1. 微信小程序支付接入实战 1.1. 需求 最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...
- 我的微信小程序第二篇
在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不 ...
随机推荐
- SQL SERVER 2012安装配置说明(多图详解)
1. 优先安装软件 1. net framework3.5. 2. 在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET ...
- <<,>>(有符号位移)和>>>(无符号位移)的使用方法,及差别
<< —— 有符号左移 >> —— 有符号右移 <<< —— 无符号左移 >>> —— 无符号右移 无符号移位(>&g ...
- excel匹配相应条件 自动填充数据
=VLOOKUP(A6&B6,IF({1,0},Sheet3!$A$3:$A$505&Sheet3!$B$3:$C$505,Sheet3!$Q$3:$Q$505),2,0) =VLOO ...
- 【洛谷P3128】Max Flow
题目大意:给定一棵 N 个节点的无根树,有 M 个操作,每次选定一条树链,将这条链上所有点的点权 +1,最后求树上点的最大点权是多少. 题解:树上差分算法的应用. 发现操作有 M 次,但是询问只有一次 ...
- MFC界面库BCGControlBar v30.1——Grid/Report控件
亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBar Professional for MFC和BCGSuite for MFC v30.1正式发布!此版本包含themed find ...
- 2017 阿里巴巴 C++后台开发一面 3.14
下午4点接到一个杭州打过来的电话,阿里巴巴一面.持续时间半个小时. 面试官是阿里云KVStore组. 1.自我介绍,说一下项目 说了下之前在公司做的手绘几何图形规整输出的项目,提了下当时遇到的问题,以 ...
- WDigest
WDigest 是windows在XP系统中应用的,其作用主要是与超文本传输协议(HTTP)和简单的身份验证安全层(SASL)一起交换使用.而Digest与NTLM协议类似,也是挑战认证协议. 简单说 ...
- jquery preventDefault()方法 语法
jquery preventDefault()方法 语法 作用:preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交).大理石平台价格 语法:event ...
- ELEMENT-UI 封装el-table 局部刷新row
//关于封装的el-table行数据更新后如何局部更新row row.status=status; this.$set(this.$refs.elTable.$data.tableData,index ...
- 手动升级 Confluence 6 - 升级 Confluence
4. 备份 备份你的数据库,并且确定的你的数据库备份已经被正确的创建了.如果你的数据库不支持在线备份的话,你需要首先停止 Confluence 的运行. 备份你的 Confluence 安装目录(in ...