此模板可以大大提高开发效率,拿来就可以用,只需稍作修改就行
vwml:
<image src="/img/w.jpg" class="image"></image>
<scroll-view class="container" scroll-y="true" enable-flex="true" enable-passive="true">
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>曹老师</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
<view class="scroll-item">
<ul class="left">
<li>
<image src="/img/w.jpg" class="img"></image>
</li>
</ul>
<ul class="right">
<li>Android系统开发</li>
</ul>
</view>
</scroll-view>
app.vxss
/**app.wxss**/
.container {
height: 100%;
width: 100%;
flex-direction: column;
/* box-sizing: border-box; */
position:fixed;
/* z-index:2; */
border-top:1px solid white ;
}
.scroll-item{
height: 10%;
width: 100%;
flex: 1;
display: flex;
}
.image{
width:100%;
height:100%;
display:block;
position:fixed;
}
img{
width: 5px;
height: 5px;
margin: 10px;
display: block;
}
.left{
flex: 1.5;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.img{
width: 60px;
height: 60px;
border-radius: 5px;
}
.right{
flex: 4;
border-bottom:1px solid white;
display: flex;
flex-direction: column;
/* justify-content: space-around; */
justify-content: space-around;
align-items: center;
}