微信小程序新闻详情页面效果实现

<!--pages/post/post-detail/post-detail.wxml-->
<!--先静后动，先样式再数据-->
<view class="detail-container"><image class="head-image" src="/images/post/vr.png"></image><view class="author-date"><image class="avatar" src="/images/avatar/2.png"></image><text class="author">迪丽热巴</text><text class="const-text">发表于</text><text class="date">三天前</text></view><text class="title">迪丽热巴（Dilraba）</text><view class="tool"><view class="circle-img"><image src="/images/icon/collection.png"></image><image class="share-img" src="/images/icon/share.png"></image></view><view class="horizon"></view></view><text class="detail">迪丽热巴（Dilraba），1992年6月3日出生于新疆乌鲁木齐市，中国内地影视女演员、歌手，毕业于上海戏剧学院。</text>
</view>

/* pages/post/post-detail/post-detail.wxss */.detail-container {display: flex;flex-direction: column;
}
.head-image {background-color: #ff6900;width: 100%;height: 460rpx;
}.author-date {flex-direction: row;margin-left: 30rpx;margin-top: 20rpx;
}.avatar {height: 64rpx;width: 64rpx;vertical-align: middle;
}.author {font-size: 30rpx;font-weight: 300;margin-left: 20rpx;vertical-align: middle;color: #666;
}.const-text {font-size: 24rpx;color: #999;margin-left: 20rpx;
}.date {font-size: 24rpx;margin-left: 30rpx;vertical-align: middle;color: #999;
}.title {margin-left: 40rpx;font-size: 36rpx;font-weight: 700;margin-top: 30rpx;letter-spacing: 2px;color: #4b556c;
}.tool {margin-top: 20rpx;
}.circle-img {float: right;margin-right: 40rpx;vertical-align: middle;
}.circle-img Image {width: 90rpx;height: 90rpx;
}.share-img {margin-left: 30rpx;
}.horizon {width: 660rpx;height: 1px;background-color: #e5e5e5;vertical-align: middle;position: relative;top: 46rpx;margin: 0 auto;z-index: -99;
}.detail {color: #666;margin-left: 30rpx;margin-top: 20rpx;margin-right: 30rpx;line-height: 44rpx;letter-spacing: 2px;font-size: 24rpx;font-family: MicroSoft Yahei;
}

微信小程序新闻详情页面效果实现相关推荐

微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）
前段书写 <view class="about"><block wx:for="{{swiperTit ...
微信小程序新闻列表详情页
微信小程序新闻列表详情页不忘初心,方得始终.初心易得,始终难守首先创建 post-detail 文件夹,创建四种文件. 修改 post.wxml 文件代码,给每个新闻块添加一个点击事件.并且我们要 ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序--订单查询页面
微信小程序–订单查询页面包含功能点: 订单查询结构:order.wxml <tabs tabList="{{tabList}}" binditemChange=" ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
微信小程序心形点赞效果
微信小程序心形点赞效果前言准备实现原理布局样式逻辑实现尾巴前言之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...

微信小程序新闻详情页面效果实现

微信小程序新闻详情页面效果实现相关推荐

最新文章

热门文章