微信小程序开发

2021/5/11 22:25:21

本文主要是介绍微信小程序开发,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

横向滚动,竖向滚动;

wxml:

<scroll-view scroll-x="ture"> 
<view  class="scrOut" >
<view class="scrbox">111</view>
<view class="scrbox">222</view>
<view class="scrbox">333</view>
<view class="scrbox">444</view>
<view class="scrbox">555</view>
</view>
</scroll-view>

<scroll-view scroll-y="ture">
  <view class="scrOut2">
   <view class="scrbox2">111</view>
   <view class="scrbox2">222</view>
   <view class="scrbox2">333</view>
   <view class="scrbox2">444</view>
   <view class="scrbox2">555</view>
  </view>
</scroll-view>

wxss:

.scrOut{
  display:flex; width: 500px;
  
}
.scrbox{
  background-color: darkgoldenrod;
  width: 100px;
  height: 100px;
  margin-right: 5px;
  flex: 1 0 120px;
}
.scrOut2{
 height: 250px;
}
.scrbox2{
  width: 100%; height: 100px;
  margin-bottom: 3px;
  background-color: pink;
}

图片滚动:

WXML:

<swiper-item>
  <image src="/imges/1.webp"></image>
</swiper-item>
<swiper-item>
  <image src="/imges/2.webp"></image>
</swiper-item>
<swiper-item>
  <image src="/imges/3.webp"></image>
</swiper-item>
</swiper>

 



这篇关于微信小程序开发的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程