Skip to content

N
nyx
Commit 1414a507 by jscat
Options

nyx: 发现 

1. 调整详情页的格式
parent 21cb52b6
正在显示 包含 57 行增加 和 54 行删除
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.js
// pages/index/note-info/note-info.js // pages/index/note-info/note-info.js
...@@ -8,6 +8,7 @@ Page({ ...@@ -8,6 +8,7 @@ Page({
windowHeight: "", windowHeight: "",
windowWidth: "", windowWidth: "",
contentHeight: "",
scrollLeft: 0, //切换栏的滚动条位置 scrollLeft: 0, //切换栏的滚动条位置
curIndex : 0, curIndex : 0,
toView: 'tag1', toView: 'tag1',
...@@ -36,7 +37,15 @@ Page({ ...@@ -36,7 +37,15 @@ Page({
proDec: "都要买", proDec: "都要买",
proPrice: "100", proPrice: "100",
}, },
] ],
notes:
{
note_image: "https://img.xiaohongshu.com/items/c1a0056ba9ba17b30446a0e040dc9e30@800w_90Q_1x_2o.jpg",
title: "便携香水加香一天",
writer: "无敌花木兰",
like: 10,
writer_image: "../../../icon/icon_avatar3.png"
},
}, },
...@@ -50,6 +59,7 @@ Page({ ...@@ -50,6 +59,7 @@ Page({
this.setData({ this.setData({
windowHeight: windowHeight, windowHeight: windowHeight,
windowWidth: windowWidth, windowWidth: windowWidth,
contentHeight : windowHeight * 0.75 + 30,
}) })
wx.setNavigationBarTitle({ wx.setNavigationBarTitle({
......
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxml
<view class="page"> <view class="page">
<view class="page"> <view class="page">
<scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}"> <!-- 作者信息 -->
<view class="note-handle">
<image class="writer-image" src="{{notes.writer_image}}"/>
<span class="name">{{notes.writer}}</span>
</view>
<!-- 图片 -->
<scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{contentHeight}}px" bindscroll="getSelectItem" scroll-left="{{scrollLeft}}">
<block wx:for="{{proList}}" wx:key="unique" wx:for-index="id" wx:for-item="item"> <block wx:for="{{proList}}" wx:key="unique" wx:for-index="id" wx:for-item="item">
<view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'> <view class="scroll_item {{item.selected ? 'selected' : ''}}" data-index='{{item.index}}' bindtap='selectProItem'>
<view class='proImg'><image src="{{item.proUrl}}" mode="widthFix"/></view> <image src="{{item.proUrl}}" mode="widthFix"/>
<!-- <view class='detailBox'>
<view class='proTitle'>{{item.proTitle}}</view>
<view class='proDec'>{{item.proDec}}</view>
<view class='proPrice'>￥{{item.proPrice}}</view>
<navigator class='detailLink' url="../detail/detail?id={{item.id}}">查看详情 ></navigator>
</view> -->
</view> </view>
</block> </block>
</scroll-view> </scroll-view>
<!-- 文字内容 -->
<view class="note">
<view class="note-info">
在欧洲国家中，目前意大利的新冠肺炎疫情形势最为严峻。截至当地时间21日18时，意大利累计确诊病例达到53578例，累计死亡病例达4825例。旅意侨胞和留学生如何保证安全？回国还是不回国？大使馆能提供哪些帮助？今天下午（北京时间3月22日17时），中国驻意大利大使李军华同旅意侨胞、留学生代表一起在线交流。
</view>
</view>
</view> </view>
增值产品-小程序及app/nyx-master/pages/discover/note-info/note-info.wxss
.scroll-view_H{ .scroll-view_H{
.scroll-view_H{ .scroll-view_H{
position: relative;
width: 100%; width: 100%;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
...@@ -11,11 +12,11 @@ ...@@ -11,11 +12,11 @@
display: inline-block; display: inline-block;
border-radius: 20rpx !important ; border-radius: 20rpx !important ;
overflow: hidden; overflow: hidden;
transform: scale(0.9); transform: scale(0.9, 1);
box-shadow: 0 0 10px #ccc; /* box-shadow: 0 0 10px #ccc; */
vertical-align: top; vertical-align: top;
top: 5%; top: 2%;
height: 72%; /* height: 72%; */
background-color: #fff; background-color: #fff;
} }
.scroll_item:first-child{ .scroll_item:first-child{
...@@ -27,56 +28,42 @@ ...@@ -27,56 +28,42 @@
left: 0; left: 0;
} }
.scroll_item.selected{ .scroll_item.selected{
transform: scale(0.9); /* transform: scale(0.9); */
border: solid 1px #ffcd54; border: solid 1px #ffcd54;
} }
.scroll_item .proImg{
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
width: 100%;
max-height: 200rpx;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.scroll_item image { .scroll_item image {
width: 100%; width: 100%;
float: left; float: left;
margin-top: 0;
border-top-left-radius: 20rpx; border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx; border-top-right-radius: 20rpx;
} }
.detailBox { .note{
padding: 30rpx 5% 30rpx 5%;
float: left;
width: 100%; width: 100%;
border-bottom-left-radius: 20rpx; /* position: fixed; */
border-bottom-right-radius: 20rpx;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
background: #fff; background: #fff;
border-radius: 5px;
float: left;
} }
.proTitle { .note-info{
font-size: 36rpx; font-size: 13px;
color: #666;
line-height: 50rpx; /* 后期用于 '展开' 功能 */
overflow: hidden; /* overflow : hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; display: -webkit-box;
} -webkit-line-clamp: 4;
.proDec { -webkit-box-orient: vertical; */
font-size: 30rpx; margin-left: 10%;
color: #999; margin-right: 10%;
line-height: 50rpx; margin-top: 20rpx;
} }
.proPrice { .note-handle{
font-size: 48rpx; display: flex;
color: #CA414C; flex-direction: row;
line-height: 90rpx;
} }
.detailLink{ .writer-image{
color: #666; width: 30px;
font-size: 30rpx; height: 30px;
margin-left: 10%;
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论