発光プロローグ:
一つのことをやり過ぎると、それは愛のように反対になり、愛しすぎると魅了されて憎しみになります。ときどき私は越の心の中で最も望まれていることは家であり、愛が続くと思うので、彼女を成し遂げるためには、彼女が最初に愛を放棄するのを助けることができるだけです。
テキスト:
タオでタオを認識する
実際の開発プロセスでは、サーバーにリクエストしてパラメーターを渡す必要があります。
<scroll-view scroll-y>
<text class="title">动漫周边详情</text>
<view>
<swiper autoplay="true" circular indicator-dots>
<swiper-item>
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="true"></video>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/a.png" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/b.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/d.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/c.png" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<text class="detail-info">详情页</text>
<view>
<image src="/images/temp/c.png" mode="widthFix"></image>
<image src="/images/1.jpg" mode="widthFix"></image>
<image src="/images/18.jpg" mode="widthFix"></image>
</view>
</scroll-view>
<!-- 下面就是底部的设计,夜光 -->
<view class="bottom">
<button>添加到购物车</button>
<button>立即购买</button>
</view>
.title{
display: block;
text-align: center;
font-size: 50rpx;
font-weight: 500;
margin: 10rpx 0;
}
/* 我们把滚动条设置了一些属性 */
scroll-view{
width: 100%;
height: 100vh;
}
swiper{
width: 96%;
height: 490rpx;
margin: 0 16rpx;
}
/* 下面有个并列的用法 */
swiper video,image{
width: 100%;
border-radius: 16rpx;
}
<scroll-view scroll-y>
<text class="title">动漫周边详情</text>
<view>
<swiper autoplay="true" circular indicator-dots>
<swiper-item>
<video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="true"></video>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/a.png" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/b.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/d.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<!-- 轮播,一般,我们都是放图片 -->
<image src="/images/temp/c.png" mode="widthFix"></image>
</swiper-item>
</swiper>
</view>
<view class="info">
<text class="name">周边抱枕-小埋限量款</text>
<text class="price">¥ 1111RMB</text>
</view>
<text class="title">细品</text>
<view class="wrap">
<image src="/images/temp/c.png" mode="widthFix"></image>
<image src="/images/1.jpg" mode="widthFix"></image>
<image src="/images/18.jpg" mode="widthFix"></image>
</view>
</scroll-view>
<!-- 下面就是底部的设计,夜光 -->
<view class="bottom">
<button>添加到购物车</button>
<button>立即购买</button>
</view>
.title{
display: block;
text-align: center;
font-size: 50rpx;
font-weight: 500;
margin: 10rpx 0;
}
/* 我们把滚动条设置了一些属性 */
scroll-view{
width: 100%;
height: 100vh;
}
swiper{
width: 96%;
height: 490rpx;
margin: 0 16rpx;
}
/* 下面有个并列的用法 */
swiper video,image{
width: 100%;
border-radius: 16rpx;
}
.info{
width: 96%;
display: flex;
margin: 0 16rpx;
justify-content: space-around;
flex-direction: row;
background-color: pink;
}
.info text{
font-size: 40rpx;
color: white;
line-height: 80rpx;
}
.bottom{
width: 100%;
display: flex;
/* 夜光:下面写一个绝对定位,但是光这个还不行 */
position: absolute;
/* 还需要一个最下面为0 */
bottom: 0;
/* margin: 0 16rpx; */
flex-direction: row;
background-color: pink;
}
.bottom button{
width: 50%;
background-color: pink;
}