#微信小程序(轮播图以及开发方法)

1.IDE:微信开发者工具


2.实验:轮播图以及正确的开发方法

(1)有HTML,CSS,javascript基础即可

(2)写界面一定要查看开发手册,这是微信小程序比较好的地方,由于是国内软件有中文开发手册。手册地址,直接搜---->微信小程序----->开发文档。

网址:视图容器 / swiper (qq.com)https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

(3)WXML中的动态数据全部来自于Pages---->data中

(4)数据绑定可以使用{{}}。(WXML绑定JS中的数据)

(5)框架中也含有许多WXML以及WXSS使用说明

(6)像素编辑最好用rpx而不用px,rpx可以适配手机像素,灵活变化

(7)如果遇到真机调试时,屏幕无法占满屏幕,可以在WXSS里面如下设置,将宽度设置为100%

css 复制代码
/* 图片 */
.picture{
  width: 100%;      /*宽度占满*/
}

3.记录


4.代码

javascript 复制代码
welcome:"welcome to monitor your cat",     //用于数据绑定示例
html 复制代码
<!-- 轮播图 -->
<!-- 激活轮播图小点,设置小店颜色绿色,衔接滑动,自动播放 -->
<view>
  <swiper class="index_swiper" indicator-dots="true" indicator-color="green" circular="true" autoplay="true">    
<!-- 第一张图片 -->
    <swiper-item>
      <image src="../imag/ECY1.png" mode="scaleToFill"/>  <!--相对路径,最好使用网络图片地址-->>
    </swiper-item>
<!-- 第二张图片 -->
    <swiper-item>
      <image src="../imag/ECY2.jpg" mode="scaleToFill"/>
    </swiper-item>
<!-- 第三张图片 -->
    <swiper-item>
      <image src="../imag/ECY3.jpg" mode="scaleToFill"/>
    </swiper-item>
<!-- 第四张图片 -->
    <swiper-item>
      <image src="../imag/ECY4.png" mode="scaleToFill"/>
    </swiper-item>
  </swiper>
</view>

<!-- 数据绑定 -->
<view>
  {{welcome}}
</view>
相关推荐
Dragon Wu6 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
游戏开发爱好者87 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
星光一影20 小时前
Java医院管理系统HIS源码带小程序和安装教程
java·开发语言·小程序
毕设源码-郭学长20 小时前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
马尚道1 天前
uniapp陪诊小程序
微信小程序
Terio_my1 天前
微信小程序-智慧社区项目开发完整技术文档(上)
微信小程序·小程序
從南走到北1 天前
JAVA国际版任务悬赏发布接单系统源码支持IOS+Android+H5
android·java·ios·微信·微信小程序·小程序
游戏开发爱好者81 天前
iOS 开发推送功能全流程详解 从 APNs 配置到上架发布的完整实践(含跨平台上传方案)
android·macos·ios·小程序·uni-app·cocoa·iphone
汤姆yu1 天前
基于微信小程序的博物馆文创系统
微信小程序·小程序·博物馆
云起SAAS2 天前
ai公司起名取名抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·ai公司起名取名