Luminousは、WeChatの小さなプログラム開発の分野へとあなたを導きます（13）

発光プロローグ：

 

あなたの名前のほんの数ストロークがありますが、それらは私の心の奥深くにあります。

 

 

 

 
 
テキスト：
 
                                              タオでタオを認識する

 

 

/* 样式很重要，在这里书写 */
.container2{
   display: flex;
   flex-direction: column;
   padding: 10rpx 20rpx;
   height: 390px;
   background-color:#576b95;
   /* border-radius: 18rpx; */
}


swiper{
   width: 100%;
   height: 370rpx;
}

swiper image{
   width: 100%;
   border-radius: 16rpx;
}

/* 8个icon */

.sorts-wrap {
  font-size: 28rpx;
  /* text-align: center; */
  margin: 15px 15px 15px 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: pink;
  border-radius: 16rpx;
}

.sorts-wrap .flex-wrap {
  /* display: flex;
  flex-direction: column; */
  margin-top: 20rpx;
}

.sorts-wrap navigator image {
  width: 80rpx;
  height: 80rpx;
}

/* 菜单，夜光 */
/* .nav{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav .menu{
  display: flex;
  flex-direction: column;
  width: 25%;
}

.menu image{
  width: 120rpx;
  height: 120rpx;
} */

/* 产品列表样式 */

.hot{
  display: block;
  text-align: center;
  margin: 10rpx 0;
}

.wrap{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

}

.wrap .product{
  display: flex;
  flex-direction: column;
  width: 46%;

}

 

 

 

 

 

/* 样式很重要，在这里书写 */
.container2{
   display: flex;
   flex-direction: column;
   padding: 10rpx 20rpx;
   height: 390px;
   background-color:#576b95;
   /* border-radius: 18rpx; */
}


swiper{
   width: 100%;
   height: 370rpx;
}

swiper image{
   width: 100%;
   border-radius: 16rpx;
}

/* 8个icon */

.sorts-wrap {
  font-size: 28rpx;
  /* text-align: center; */
  margin: 15px 15px 15px 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: gray;
  border-radius: 16rpx;
}

.sorts-wrap .flex-wrap {
  /* display: flex;
  flex-direction: column; */
  margin-top: 20rpx;
}

.sorts-wrap navigator image {
  width: 80rpx;
  height: 80rpx;
}

/* 菜单，夜光 */
/* .nav{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav .menu{
  display: flex;
  flex-direction: column;
  width: 25%;
}

.menu image{
  width: 120rpx;
  height: 120rpx;
} */

/* 产品列表样式 */

.hot{
  display: block;
  text-align: center;
  margin: 10rpx 0;
}

.wrap{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

}

.wrap .product{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 46%;
  margin: 0 10rpx;
  background-color: pink
}

.product image{
   width: 100%; 

}

.info{
   display: flex;
   flex-direction: row;
   justify-content: space-between;

}

.info .price{
  color: gray
}

 

<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!--  首先 需要一个容器 夜光 -->
<view class="container2">
  <!-- 学过前端都知道，这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
  <swiper autoplay="true" circular indicator-dots>
    <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 class='sorts-wrap'>
  <view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
  <view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
      <navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
        <image src='{{sortItem.image}}'></image>
        <text>{{sortItem.title}}</text>
      </navigator>
    </view>
  </view>
</view>


</view>



<!-- 夜光： 下面再取一个容器  →  是产品列表 -->
<text class="hot">热门动漫周边</text>
<view class="wrap">

<view class="product">

   <image src="/images/7.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">动漫1</text>
      <text class="price">外国</text>
   </view>


</view>
<view class="product">

   <image src="/images/9.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">动漫2</text>
      <text class="price">外国</text>
   </view>


</view>


</view>

効果はほとんど出ていませんね。

 

<!--pages/milk/milk.wxml-->
<!-- <text>精彩呈现</text> -->
<!--  首先 需要一个容器 夜光 -->
<view class="container2">
  <!-- 学过前端都知道，这种一直变换的图片组件~~ 在微信小程序开发里面稍微轻松点-->
  <swiper autoplay="true" circular indicator-dots>
    <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 class='sorts-wrap'>
  <view class='flex-wrap' wx:for='{{sortRows}}' wx:for-item='sortRow' wx:for-index='rowIndex' wx:key='unique'>
  <view class='flex-item' wx:for='{{sortRow}}' wx:for-item='sortItem' wx:for-index='sortIndex' wx:key='unique'>
      <navigator url='{{sortItem.jumpUrl}}' hover-class='none'>
        <image src='{{sortItem.image}}'></image>
        <text>{{sortItem.title}}</text>
      </navigator>
    </view>
  </view>
</view>


</view>



<!-- 夜光： 下面再取一个容器  →  是产品列表 -->
<text class="hot">热门动漫周边</text>
<view class="wrap">

<view class="product">

   <image src="/images/7.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边1</text>
      <text class="price">外国</text>
   </view>


</view>
<view class="product">

   <image src="/images/9.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边2</text>
      <text class="price">外国</text>
   </view>


</view>

<view class="product">

   <image src="/images/8.png" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边3</text>
      <text class="price">外国</text>
   </view>


</view>
<view class="product">

   <image src="/images/10.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边4</text>
      <text class="price">外国</text>
   </view>


</view>

<view class="product">

   <image src="/images/11.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边5</text>
      <text class="price">外国</text>
   </view>


</view>
<view class="product">

   <image src="/images/12.jpg" mode="widthFix"></image>
   <view class="info">
      <text class="name">周边6</text>
      <text class="price">外国</text>
   </view>


</view>

</view>

 

/* 样式很重要，在这里书写 */
.container2{
   display: flex;
   flex-direction: column;
   padding: 10rpx 20rpx;
   height: 390px;
   background-color:#576b95;
   /* border-radius: 18rpx; */
}


swiper{
   width: 100%;
   height: 370rpx;
}

swiper image{
   width: 100%;
   border-radius: 16rpx;
}

/* 8个icon */

.sorts-wrap {
  font-size: 28rpx;
  /* text-align: center; */
  margin: 15px 15px 15px 15px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: gray;
  border-radius: 16rpx;
}

.sorts-wrap .flex-wrap {
  /* display: flex;
  flex-direction: column; */
  margin-top: 20rpx;
}

.sorts-wrap navigator image {
  width: 80rpx;
  height: 80rpx;
}

/* 菜单，夜光 */
/* .nav{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.nav .menu{
  display: flex;
  flex-direction: column;
  width: 25%;
}

.menu image{
  width: 120rpx;
  height: 120rpx;
} */

/* 产品列表样式 */

.hot{
  display: block;
  text-align: center;
  margin: 10rpx 0;
}

.wrap{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

}

.wrap .product{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 46%;
  margin: 6rpx 10rpx;
  background-color: #666;
     
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx; 
}

.product image{
   border-top-left-radius: 16rpx;
   border-top-right-radius: 16rpx;

   width: 100%; 

}

.info{
   display: flex;
   flex-direction: row;
   justify-content: space-around;

}

.name{
  color: white;
}

.info .price{
  color: gray
}