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

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>
相关推荐
会点法律的程序员9 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app
FliPPeDround9 小时前
告别 uni-app 启动烦恼:@uni-helper/unh 让开发流程更顺畅
前端·微信小程序·uni-app
2501_9159214312 小时前
iOS 26 电耗监测与优化,耗电问题实战 + 多工具 辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9159214312 小时前
苹果软件混淆与 iOS 应用加固白皮书,IPA 文件加密、反编译防护与无源码混淆方案全解析
android·ios·小程序·https·uni-app·iphone·webview
@二十六12 小时前
微信小程序订阅消息工具封装,兼容一次性订阅和长期订阅
微信小程序·小程序·订阅消息
dcloud_jibinbin14 小时前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
用力的活着14 小时前
uniapp 微信小程序蓝牙接收中文乱码
微信小程序·小程序·uni-app
流***陌15 小时前
陪诊陪护小程序前端功能解析:就医照料的便捷对接与全流程保障
小程序
说私域15 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在个性化与小众化消费崛起中的营销宣传策略研究
人工智能·小程序
知识分享小能手15 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue