夜光带你走进 微信小程序开发（十四）擅长的领域

夜光序言：

 

一件事情过度了，就会相反，就像爱，爱得太深了，会入魔，会变成恨。有时候想想，月的心里最渴望的是家，其次才是爱，所以为了成全她，只能帮她把爱情先舍弃了。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

实际开发过程中，是要传参的，通过请求服务器的方式来

<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;
}