摘要：作业总结：基本没什么问题，熟练了一下微信小程序的变成index.wxml<!--index.wxml--> <view style='background-color:#ffffff;'> <swiper indicator-dots='true' autoplay='true'
作业总结：基本没什么问题，熟练了一下微信小程序的变成
index.wxml
<!--index.wxml-->
<view style='background-color:#ffffff;'>
<swiper indicator-dots='true' autoplay='true' interval="5000" duration="1000" indicator-color='#ffffff' indicator-active-color='#ff5d5d' >
<swiper-item>
<image src="../img/1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../img/2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="../img/3.jpg"></image>
</swiper-item>
</swiper>
<view class="hot">要闻</view>
<!-- 要闻列表 -->
<view class="hot-div" wx:key="id">
<navigator url="../news/details?id={{item.id}}">
<image src='../img/a.jpg' class="hot-img"></image>
<view class="hot-right">
<view class="size0-9rem hide_size">恐龙蛋小夜灯台灯装饰</view>
<view class="size0-7rem">2018-11-12</view>
</view>
</navigator>
<view class="clear-both"></view>
</view>
<view class="hot-div" wx:key="id">
<!-- <navigator url="../news/details?id={{item.id}}"> -->
<image src='../img/c.jpg' class="hot-img"></image>
<view class="hot-right">
<view class="size0-9rem hide_size">恐龙蛋小夜灯台灯装饰</view>
<view class="size0-7rem">2018-11-12</view>
</view>
<!-- </navigator> -->
<view class="clear-both"></view>
</view>
<view class="hot-div" wx:key="id">
<!-- <navigator url="../news/details?id={{item.id}}"> -->
<image src='../img/e.jpg' class="hot-img"></image>
<view class="hot-right">
<view class="size0-9rem hide_size">恐龙蛋小夜灯台灯装饰</view>
<view class="size0-7rem">2018-11-12</view>
</view>
<!-- </navigator> -->
<view class="clear-both"></view>
</view>
<view class="hot-div" wx:key="id">
<!-- <navigator url="../news/details?id={{item.id}}"> -->
<image src='../img/f.jpg' class="hot-img"></image>
<view class="hot-right">
<view class="size0-9rem hide_size">恐龙蛋小夜灯台灯装饰</view>
<view class="size0-7rem">2018-11-12</view>
</view>
<!-- </navigator> -->
<view class="clear-both"></view>
</view>
</view>index.wxss
/**index.wxss**/
.hot{
background-color:rgb(255, 255, 255);
padding-left:0.3rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
font-size:0.8rem;
color:#33ccff;
}
.hot-div{
background-color: white;
padding:0.3rem;
}
.hot-img{
width: 30%;
height: 75px;
float: left;
}
.hot-right{
float:left;
margin-left:0.5rem;
height:75px;
width:65%;
}
.clear-both{
clear:both;
}shop:lists.wxml
<!--pages/shop/list.wxml--> <view class="back"> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/b.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/c.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/d.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/e.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/f.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> <!-- 分类 --> <navigator url="../shop/details"> <view class="pro"> <view class="pro-img"><image src="../img/g.jpg" class="img"></image></view> <view class="pro-txt">月球灯下夜灯</view> </view> </navigator> </view>
shop:list.wxss
/* pages/shop/list.wxss */
.pro{
width:50%;
float: left;
display: flex;
flex-direction: column;
align-items: center;
/* padding-bottom:1rem; */
padding-top:1rem;
}
.img{
width: 40vw;
height: 40vw;
}
.pro-txt{
font-size: 16px;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}shop:details.wxml
<!--pages/shop/details.wxml--> <!-- <text>pages/shop/details.wxml</text> --> <swiper class="scroll" indicator-dots='true' autoplay='true' interval="5000" duration="1000" indicator-color='#ffffff' indicator-active-color='#ff5d5d' > <swiper-item> <image src="../img/g.jpg" class="img"></image> </swiper-item> <swiper-item> <image src="../img/h.jpg" class="img"></image> </swiper-item> <swiper-item> <image src="../img/e.jpg" class="img"></image> </swiper-item> </swiper> <view class="title">抖音月球灯月亮灯地球创意3D打印浪漫床头台灯卧室充电发光小夜灯</view> <view class="de-txt"> <view class="price">￥120.00</view> <view class="count">1299人付款</view> </view> <view class="hr"></view> <view class="title">描述：</view> <view class="info">通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签，第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进，这里我们给大家通过案例演示给大家，希望通过DIVCSS5案例掌握CSS text-indent缩进样式。</view> <view class="pic"> <image src="../img/d.jpg" style="width:100%;"></image> <image src="../img/e.jpg" style="width:100%;"></image> <image src="../img/f.jpg" style="width:100%;"></image> <image src="../img/g.jpg" style="width:100%;"></image> </view>
shop:details.wxss
/* pages/shop/details.wxss */
.scroll{
height:315px;
}
.img{
width: 100%;
height: 100%;
}
.de-txt{
padding-top:0.5rem;
display: flex;
align-items: center;
width: 100%
}
.price{
font-size:1.5rem;
font-weight: bold;
color: red;
float: left;
padding-left:0.3rem;
}
.count{
padding-left:35vw;
color: #6c6c6c;
font-size: 0.8rem;
}
.hr{
width: 100%;
height: 3vw;
background-color:rgb(235, 235, 235);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.title{
padding-left: 0.3rem;
}
.info{
padding-left: 0.3rem;
padding-right: 0.3rem;
text-indent: 2rem;
}
批改老师：天蓬老师批改时间：2018-12-16 12:29:08
老师总结：微信小程序, 里面的很多语法与一些前端框架类型,比如: vue, 很有用
