微信小程序文章界面简单布局

效果图：

wxml文件：

    <view class="content"><!-- 头像 --><view class="author-date"> <image src="/images/4.png" class="author"></image><text class="date">logo 2017年七月</text></view><!-- 标题内容 --><text class="title">那年夏天你在哪里</text><image class="image" src="/images/6.jpg"></image><text class="article-content">天不言自高，地不言自厚，奇迹，是不会在容易的道路上绽放的。人生没有如果，只有后果和结果，过去的不再回来，回来的不再完美。</text><view ><image class="article-images" src="../../images/icon/chat.png"></image><text  class="article-text">66</text><image class="article-images" src="../../images/icon/view.png"></image><text class="article-text">88</text></view></view>

wxss样式文件：

swiper{width:100%;height:500rpx;
}
swiper image{width:100%;height:500rpx;
}
.content{/* display: flex;  */flex-direction: colum;margin-top: 30rpx;margin-bottom: 30rpx;background-color: #fff;/* border-bottom: 1px solid #ededed;  */border-top: 1px solid #ededed; padding-bottom: 5px;
}.author-date{ /* margin-top: 10rpx;margin-bottom: 20rpx;margin-left: 10rpx; */margin: 10rpx 0 20rpx 10rpx;
}
.author{width: 60rpx;height: 60rpx;vertical-align: middle;
}
.date{margin-left: 20rpx;vertical-align: middle;margin-bottom: 5px;font-size: 26rpx;
}
.title{font-size: 34rpx;font-weight: 600;color:#333;margin-bottom: 20px;
}
.image{margin-left: 16px;width: 100%;height: 200px;margin: auto 0;margin-top: 10px;margin-bottom: 10px;
}
.article-content{color: #666;font-size: 28rpx;margin-bottom: 20rpx;margin-left: 30rpx;line-height: 40rpx;letter-spacing: 2rpx;
}
.article-images{width: 16px;height: 16px;margin-right: 8px;vertical-align: middle;
}
.article-text{vertical-align: middle;
}

清晨日暮，有你的光阴，值得虚度。

微信小程序文章界面简单布局相关推荐

php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框参数 Obj ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
微信小程序开发界面介绍
这里是引用主要是简单的介绍一下微信小程序开发界面的各个文件先看下这个图片这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...

微信小程序文章界面简单布局

微信小程序文章界面简单布局相关推荐

最新文章

热门文章