微信小程序2

hkaibsbdujsnsh

已于 2022-02-16 14:00:09 修改

阅读量314

点赞数 1

文章标签：微信小程序

于 2022-02-16 13:58:47 首次发布

本文链接：https://blog.csdn.net/m0_52681974/article/details/122951869

版权

这个案例展示了如何使用微信小程序的swiper组件创建轮播图，包括图片切换、按钮交互、输入框、开关、图标、进度条等元素的实现。同时，配置了全局和页面的背景颜色、导航栏样式，并绑定了表单提交事件。代码中还包含了一个简单的页面配置示例。

摘要由CSDN通过智能技术生成

bb.json文件内容

{
  "usingComponents": {},
  "navigationBarTitleText":"案例展示",
  "navigationBarBackgroundColor":"#000",
  "enablePullDownRefresh":true,
  "backgroundColor":"#f00"
}

bb.wxml文件内容

<swiper class="banner"  indicator-dots indicator-color="#rgba(255,255,255,0.5)"
indicator-active-color="#fff" autoplay interval="3000" circular
previous-margin="20" next-margin="20">
  <swiper-item class="bannerItem">
    <image src="/images/1.jpg"></image>
  </swiper-item>
  <swiper-item class="bannerItem">
    <image src="/images/2.jpg"></image>
  </swiper-item>
  <swiper-item class="bannerItem">
    <image src="/images/3.jpg"></image>
  </swiper-item>
</swiper>

<view class="out">
  <button class="btn1" type="primary" plain>登录</button>
  <button class="btn1">退出登录</button>
  <button class="btn1" type="primary" size="mini">支付</button>
  <button class="btn1" loading>加载中...</button>
  <button type="primary" open-type="">联系客服</button>

  <form bindsubmit="onSubmit">
    <input class="ipt" placeholder="请输入用户名" 
    auto-focus cursor-spacing="100"></input>
    <button form-type="submit">提交</button>
    <switch>checked</switch>
  </form>

<view style="padding:50px;">
  <progress percent="60" show-info font-size="15" border-radius="10"
  activeColor="pink" backgroundColor="#ccc" active bindactiveend="wancheng"/>
</view>

  <view style="padding:50px;text-align:center">
    <icon type="success" size="50">提交</icon>
    <view>提交成功，感谢你的配合！</view>
  </view>
</view>

bb.wxss文件内容

.banner{height:450rpx;border:1px solid red;}
.banner image{width:100%;height:450rpx;}
.bannerItem{padding:0 5px;box-sizing:border-box;}
button{margin:10rpx 0}
.ipt{border:1px solid #ddd;height:70rpx;padding:0 10rpx;box-sizing:border-box;}

app.json文件内容

{
  "pages": [
    "pages/bb/bb",
    "pages/aa/aa",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "新视觉实训",
    "navigationBarTextStyle": "white"
  },
  "tabBar":{
    "color":"#c30",
    "selectedColor":"#0ff",
    "backgroundColor":"#ccc",
    "borderStyle":"white",
    "list":[
      {
        "pagePath":"pages/aa/aa",
        "text":"首页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home-h.png"
      },{
        "pagePath":"pages/bb/bb",
        "text":"案例",
        "iconPath":"images/anli.png",
        "selectedIconPath":"images/anli-a.png"
      },{
        "pagePath":"pages/logs/logs",
        "text":"日志",
        "iconPath":"images/rizhi.png",
        "selectedIconPath":"images/rizhi-r.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

B站视频【P8-P12】