目录

微信小程序开发宿主环境组件

微信小程序开发:宿主环境—组件

https://i-blog.csdnimg.cn/blog_migrate/19d2d8b5451a0c7441d272f230fde888.png

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭

~✨✨

🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。

我是Srlua小谢,在这里我会分享我的知识和经验。🎥

希望在这里,我们能一起探索IT世界的奥妙,提升我们的技能。🔮

记得先点赞👍后阅读哦~ 👏👏

小程序

https://i-blog.csdnimg.cn/blog_migrate/13ab40adad424fbd39dbcd70c89a4ffd.webp?x-image-process=image/format,png ​​

https://i-blog.csdnimg.cn/blog_migrate/8d0cca2139bb4db58a02617d58ac124b.gif ​​

目录


https://i-blog.csdnimg.cn/direct/fd1196df96d64cb4bfb9583e48ed0dce.png

小程序的宿主环境-组件

https://i-blog.csdnimg.cn/direct/e47a54c7a9bc43258e6e0faca1233d05.png

不常用:

https://i-blog.csdnimg.cn/direct/6222c219205a4550830ed3d854101810.png

2.常用的视图容器类组件

https://i-blog.csdnimg.cn/direct/21a8fd2157f941cd908cede709e02325.png

https://i-blog.csdnimg.cn/direct/dcb8045444df453984de829ab43517f8.png

https://i-blog.csdnimg.cn/direct/29389e4e47a54f07b1cf12f7a46267ae.png

3.view 组件的基本使用

实现如图的 flex 横向布局效果:

https://i-blog.csdnimg.cn/direct/822b0d88218442d1be5e053d3f4181b0.png

https://i-blog.csdnimg.cn/direct/b72d0ce3d8794df1b91852b4f2c1b400.png https://i-blog.csdnimg.cn/direct/f79e1b43a47548edb2c8c2aa0861820b.png

4.scroll-view 组件的基本使用

实现如图的纵向滚动效果:

https://i-blog.csdnimg.cn/direct/9f2ffe38ad2d419bac15e11699be1ee9.png

https://i-blog.csdnimg.cn/direct/58d60627936848ab8f5f2575fe8e742f.png

https://i-blog.csdnimg.cn/direct/00f7facffa0a4bc8b359a38b6c81a1eb.png

5.swiper和swiper-item 组件的基本使用

实现如图的轮播图效果:

https://i-blog.csdnimg.cn/direct/273e1b80c982480bb500f7a5daaedc82.png

https://i-blog.csdnimg.cn/direct/b5dc07aa4a1e4a7db430c736071f343b.png

https://i-blog.csdnimg.cn/direct/e6615237bbc14f23a95f348c9f5cdfb8.png

6.swiper 组件的常用属性

https://i-blog.csdnimg.cn/direct/637455f4bc8d4af4a245b5fdf688b852.png

想要有小圆点则加上indicator-dots

https://i-blog.csdnimg.cn/direct/a95e7229e64d4c08af5e96e3a14420ad.png

修改未选中的页面小圆点为白色

https://i-blog.csdnimg.cn/direct/aaee7ed3d9154f24bff48e7952ec60b0.png

修改选中页面的小圆点为蓝色

https://i-blog.csdnimg.cn/direct/602ab08c41c34a8484aa53e23d5a73c1.png

自动切换,默认五秒

https://i-blog.csdnimg.cn/direct/01fb893c094d40f888fc11a0fe823110.png

改为三秒自动切换

https://i-blog.csdnimg.cn/direct/475656ee38954053a68968ffb98665eb.png

衔接切换,可后最后页面切回初始页面

https://i-blog.csdnimg.cn/direct/01b3636fd7884e18a881c5257bb70a11.png

7.常用的基础内容组件

https://i-blog.csdnimg.cn/direct/745bba25ff894096bd7697bb7b004b93.png

8.text 组件的基本使用

https://i-blog.csdnimg.cn/direct/40d64ac417ad482db1c34303b432dd31.png

https://i-blog.csdnimg.cn/direct/8f8a335b4cbf46f082a14c87857abd23.png

9.rich-text 组件的基本使用

https://i-blog.csdnimg.cn/direct/2e464abcc07a48e5978c9186d1d41331.png

10.其它常用组件

https://i-blog.csdnimg.cn/direct/814a9c8f590048f793055698d5d12251.png

11.button 按钮的基本使用

https://i-blog.csdnimg.cn/direct/466e6367e19e4c2699a5a89152b5acee.png

https://i-blog.csdnimg.cn/direct/676e168cd7c84ab1b54b9f5a5ae58707.png

12.image 组件的基本使用

https://i-blog.csdnimg.cn/direct/4c27c94651884571b5a5901d94ed8aa3.png

13.image 组件的 mode 属性

https://i-blog.csdnimg.cn/direct/faffd5edc5a54b49bb5000b3b066d2b7.png

默认情况下,图片容易失真:

https://i-blog.csdnimg.cn/direct/1ad258d0980642aca4ff57742a91f735.png

加上mode=“aspectFit”

https://i-blog.csdnimg.cn/direct/3ae77c8d1f534ac798843ff1c418ced1.png

保持了图片本身的比例,但是可能留白

如果使用aspectFill,则是按照比例放大,也会发生裁剪效果

https://i-blog.csdnimg.cn/direct/50f65c79da964f0db7c6dd30f90ba2d8.png

如果使用widthFix,则保持宽度不变,高度自适应,而heightFix相反

https://i-blog.csdnimg.cn/direct/2baa9342ac5246e9b931deaba49e6b3e.png

https://i-blog.csdnimg.cn/direct/2680e019847e4277a097e893a9f64fe6.png

https://i-blog.csdnimg.cn/blog_migrate/d2f7243bc15f9eee6e2236cb60a8f76b.png ​​

希望对你有帮助!加油!

若您认为本文内容有益,请不吝赐予赞同并订阅,以便持续接收有价值的信息。衷心感谢您的关注和支持!