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

小程序中滑动展示部分如何写代码,第1张

要在小程序中实现滑动展示部分,可以使用小程序自带的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. 根据实际需求,设置滑动页的内容样式和布局。

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

日常记录学习~~

参数参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

cover-image:覆盖在原生组件之上的图片视图,支持嵌套在 cover-view 里

cover-view:覆盖在原生组件之上的文本视图,支持嵌套 cover-view 、 cover-image ,可在 cover-view 中使用 button

原生组件有:map,video,canvas,camera,live-player,live-pusher

参数参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

match-media:media query 匹配检测节点,指定一仿春组 media query 规则,满足时,这个节点才会被展示。

参数参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

movable-area:是movable-view的可移动区域,必须设置width和height属性,不并芹设置默认为10px

movable-view:可移动的视图容器,在页面中可以拖拽滑动,movable-view必须在movable-area组件中使用,并且必须是直接子节点,否则不能移动。

参数参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

page-container:“假页”容器备蔽耐组件,效果类似于 popup d出层,页面内存在该容器时,当用户进行返回 *** 作,关闭该容器不关闭页面,当前页面最多只有 1 个容器,若已存在容器的情况下,无法增加新的容器

参数参考官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

scroll-view:可滚动视图区域,使用竖向滚动时,需要给一个固定高度,组件属性的长度单位默认为px

参数参考官方文档:

https://developers.weixin.qq.com/miniprogram/dev/component/share-element.html

具体使用可看官方案例哦

share-element:共享元素,该组件需与page-container组件结合使用

swiper:滑块视图容器,其中只可放置swiper-item组件,否则会导致未定义的行为。

swiper-item:仅可放置在swiper组件中,宽高自动设置为100%

这是我们最熟悉的容器啦~

微信小程序直播消息滑动,雹正拿1.打开微信,点击发源搭现,找到小程序点击,进入小程序以后,在搜索框内输入手持d幕。

2.进入小程序清姿之后可以看到字幕的样式,选择中间滚动的字幕样式

3.对边点击一处找到输入框,在输入框内输入你想显示的内容,点击右边的选项可以调节字幕内容的大小、颜色以及滚动速度等,然后保存到手机中就可以了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12393074.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存