实现效果如下:

实现代码如下:

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;
}

里面有设置相应代码注释哟!!!一起学习..加油!!!

微信小程序组件篇实战的更多相关文章

  1. 微信小程序-组件篇

    一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...

  2. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  3. 《微信小程序商城开发实战》笔者的新书,欢迎各位粉丝上京东购买

    作者图书京东链接,请点击------>>>    **微信小程序商城开发实战** 附京东真实评价截图: 编辑推荐 在当今移动互联网大潮中,微信应用凭借其庞大的用户基数和极强的用户黏性 ...

  4. 微信小程序电商实战-首页(上)

    嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图:   架构图. ...

  5. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  6. 微信小程序入门与实战 从0到1进行细致讲解 涵盖小程序开发核心技能下载

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  7. 微信小程序入门与实战(最新完整版)教程

    微信小程序入门与实战(最新完整版) 如图地址:下载地址在底部 |- 第1章 什么是微信小程序? - 0 B |- 第2章 小程序环境搭建与开发工具介绍 - 0 B |- 第3章 从一个简单的“欢迎“页 ...

  8. 微信小程序支付接入实战

    1. 微信小程序支付接入实战 1.1. 需求   最近接到一个小程序微信支付的需求,需要我写后台支持,本着能不自己写就不自己写的cv原则,在网上找到了些第三方程序,经过尝试后,最后决定了这不要脸作者的 ...

  9. 我的微信小程序第二篇

    在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不 ...

随机推荐

  1. MVC 事物

    前一阵学习mvc但是对于关联表的数据操作总是分裂开来写,这样有很大的侥幸,比如嵌套了3个 if(){ if(){ if(){ } } } 如果前两个都是true那么最后一个是false了,这样是不想看 ...

  2. poj1952 BUY LOW, BUY LOWER[线性DP(统计不重复LIS方案)]

    如题.$N \leqslant 5000$. 感觉自己思路永远都是弯弯绕绕的..即使会做也会被做繁掉..果然还是我太菜了. 递减不爽,先倒序输入算了.第一问做个LIS没什么说的.第二问统计个数,考虑什 ...

  3. CH5104 I-country[线性DP+分类讨论]

    http://contest-hunter.org:83/contest/0x50%E3%80%8C%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E3%80%8D%E4%B ...

  4. 理解 Cookie、Session、Token

    发展史 Cookie Session Token Token的起源 基于服务器的验证 基于服务器验证方式暴露的一些问题 基于Token的验证原理 Tokens的优势 发展史 1.很久很久以前,Web ...

  5. python-加密算法

    #!/usr/bin/python3 # coding:utf-8 # Auther:AlphaPanda # Description: 使用hashlib模块的md5和sha系列加密算法对字符串进行 ...

  6. ICSharpCode.SharpZipLib.Zip 压缩文件

    public class ZipFileHelper { List<string> urls = new List<string>(); void Director(strin ...

  7. BZOJ 3991: [SDOI2015]寻宝游戏 树链的并+set

    Description 小B最近正在玩一个寻宝游戏,这个游戏的地图中有N个村庄和N-1条道路,并且任何两个村庄之间有且仅有一条路径可达.游戏开始时,玩家可以任意选择一个村庄,瞬间转移到这个村庄,然后可 ...

  8. 格子游戏x(并查集)

    格子游戏 [问题描述] Alice和Bob玩了一个古老的游戏:首先画一个n * n的点阵(下图n = 3) 接着,他们两个轮流在相邻的点之间画上红边和蓝边:           直到围成一个封闭的圈( ...

  9. openwrt boot 启动出现的问题

    一.boot启动出现JFFS2挂载文件系统错误 问题排查: 1.固件问题. 2.刷机,写进去不完整. 3.flash有问题. 二.openwrt 进入web页面出错 解决方法: 1.SSH进去,先恢复 ...

  10. 「TJOI2019」甲苯先生的滚榜

    题目链接 问题分析 参照数据范围,我们需要一个能够在\(O(n\log n)\)复杂度内维护有序数列的数据结构.那么平衡树是很好的选择.参考程序中使用带旋Treap. 参考程序 #pragma GCC ...