页面结构的实现

代码如下：

<!--用户评价-->
<view id="reviewView"><!--标题--><view id="titleView">用户评价</view><!--用户评论项--><view class="reviewItemView"><view>匿名用户</view><view>昨天</view><view>很好用，可以随时观察孩子到校出校动态！</view></view><view class="reviewItemView"><view>匿名用户</view><view>昨天</view><view>很好用！</view></view><view class="reviewItemView"><view>匿名用户</view><view>昨天</view><view>推荐使用！</view></view>
</view>

页面样式实现

/*用户评价*/
.reviewItemView{padding:20rpx 0;border-bottom: 1rpx solid #f1f1f1;position: relative;
}
.reviewItemView > view:nth-child(1){font-size: 24rpx;color: #9f9f9f;
}
.reviewItemView > view:nth-child(2){font-size: 24rpx;position:absolute;top:20rpx;right:30rpx;color:#9f9f9f
}
.reviewItemView > view:nth-child(3){font-size: 30rpx;padding-top: 20rpx;
}

五角星实现

参考文档

代码如下：

<!--用户评价-->
<view id="reviewView"><!--用户评论项--><view class="reviewItemView"><view class="userNameView">匿名用户 <view>        <view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view></view>        </view><view>昨天</view><view>很好用，可以随时观察孩子到校出校动态!</view></view><view class="reviewItemView"><view class="userNameView">匿名用户 <view>        <view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_gray"></view></view></view>        </view><view>昨天</view><view>很好用！</view></view><view class="reviewItemView"><view class="userNameView">匿名用户 <view>        <view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view><view class="star"><view class="icon icon_yellow"></view></view></view>        </view><view>昨天</view><view>推荐使用！</view></view><!--查看更多--><view id="moreView" bindtap="goHotArticlePage"><text>查看更多</text><view class="arrow"></view></view>
</view>

/*用户评价*/
.reviewItemView{padding:20rpx 0;border-bottom: 1rpx solid #f1f1f1;position: relative;
}
.reviewItemView > view:nth-child(1){font-size: 24rpx;color: #9f9f9f;
}
.reviewItemView > view:nth-child(2){font-size: 24rpx;position:absolute;top:20rpx;right:30rpx;color:#9f9f9f
}
.reviewItemView > view:nth-child(3){font-size: 30rpx;padding-top: 20rpx;
}
@font-face {  font-family: 'FontAwesome';  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); }
.userNameView{position:relative;
}
.userNameView > view{display: flex;position:absolute;left:130rpx;top:6rpx;
}.star{margin-right:4rpx;}/*五角星之间的间距*//*五角星*/.star .icon:before {content: '\f005'; font-family: FontAwesome; position: absolute;left: 0;top: 0;display: block;  overflow: hidden;
}.star .icon {display: block;font-size: 24rpx; text-align: center; width: 24rpx;height: 24rpx;line-height: 24rpx;position: relative;white-space: pre;}/*灰色五角星*/.star .icon_gray{color:#dddddd}/*黄色五角星*/.star .icon_yellow:before {color: #fed300;}#moreView{height:88rpx;line-height: 88rpx;font-size: 28rpx;color: #a6a6a6;position: relative;}.arrow{width: 16rpx;height:16rpx;border-top:4rpx solid #999;border-right: 4rpx solid #999;/*旋转45度*/transform:rotate(45deg);/*调整位置*/position:absolute;right:30rpx;top:38rpx;}

微信小程序（第十九章）- 用户评价页面实现相关推荐

微信小程序(第十四章) - 信息查询页面的实现
微信小程序(第十四章)- 信息查询页面的实现前言页面标题实现信息框的实现页面结构实现页面样式实现学生到校离校信息查询列表实现页面结构实现页面样式实现正在加载实现页面结构实现页面样 ...
微信小程序开发(十)小程序支付-查询退款
应用场景提交退款申请后,通过调用该接口查询退款状态.退款有一定延时,用零钱支付的退款20分钟内到账,银行卡支付的退款3个工作日后重新查询退款状态. 接口说明这里退款还是根据商户订单号-out_tr ...
微信小程序（第七章）- 搜索框的实现
微信小程序(第七章)- 搜索框的实现搜索框的组成定义布局容器微信小程序1个页面所对应的4个文件具体实现步骤框架实现样式实现搜索框的组成外部容器i 内部容器两者关系:外部容器包裹内部容 ...
微信小程序（第二十三章）- 注册页面的实现
微信小程序(第二十三章)- 注册页面的实现页面实现页面实现基本和登录页面一样. 代码如下:  <form bindsubmit="toR ...
微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序点击按钮分享指定页面
微信小程序点击按钮分享指定页面 1.在wxml里写所要点击的按钮 <button data-info='{{order}}' open-type="share" hover- ...
uni-app 微信小程序客服聊天和发送页面卡片功能
微信小程序客服聊天和发送页面卡片功能实现步骤如下: (一):首先登录微信公众平台 :https://mp.weixin.qq.com/ 登录成功后找到----->功能-----> 客服-- ...
如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...

微信小程序（第十九章）- 用户评价页面实现

微信小程序（第十九章）- 用户评价页面实现

页面结构的实现

页面样式实现

五角星实现

微信小程序（第十九章）- 用户评价页面实现相关推荐

最新文章

热门文章