abstract:作业总结:基本没什么问题,熟练了一下微信小程序的变成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; }
Correcting teacher:天蓬老师Correction time:2018-12-16 12:29:08
Teacher's summary:微信小程序, 里面的很多语法与一些前端框架类型,比如: vue, 很有用