小程序中滑动展示部分如何写代码

要在小程序中实现滑动展示部分，可以使用小程序自带的swiper组件，具体步骤如下：

1. 在wxml文件中添加swiper组件代码：

```

<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

<swiper-item>

<!-- 第一个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第二个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第三个滑动页的内容 -->

</swiper-item>

</swiper>

```

2. 在对应的js文件中设置swiper组件的相关参数，例如：

```

Page({

data: {

indicatorDots: true, // 是否显示指示点

autoplay: true, // 是否自动切换

interval: 5000, // 自动切换时间间隔

duration: 1000 // 滑动动画时长

}

})

```

3. 根据实际需求，设置滑动页的内容样式和布局。

通过以上步骤，就可以在小程序中实现滑动展示部分了。

你好。

关于微信小程序把video固定在页面顶端的问题，解决方案如下：

1.video fixed布局会造成：视频移动，黑色底留下

2.flex布局，video固定高度，自适应部分用scroll-view, 代码如下：

…

.grid-box{

width: 100%

height: 100%

display: flex

flex-direction: column

}

.grid-const{width: 750rpxheight: 422rpx}

.grid-var{flex: 1}

.content{height: 100%}

以上代码可以满足需求，但是下拉页面，video还是会跟着移动

3.最终解决方案，禁止页面Page滚动：

在json配置文件中添加：“disableScroll”:true

经测试，页面效果和腾讯视频一致。

运行条件

HBuilder X 2.2.2

安装后，从插件市场导入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifest.json 的源码视图里配置是切换模式， manifest.json ->app-plus ->nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差，不建议导入过多视频。

项目效果

h5在线地址

---