从0到1开发一个小程序（二）

开发须知：开发前需掌握 html、css、Javascript、Java等相关技术

新建项目

填写对应的项目名称、appId
开发模式选择小程序，后端服务我选择自己搭建不实用云服务
开发语言使用JavaScript
模板使用基础模版即可

创建小程序之后进入是一个hello world 程序，可以获取用户头像和昵称
index页面就是我们的主页，我们需要把index.wxml中的内容替换为我们自己的内容，首先我们来实现一个功能 消息滚动通知

消息滚动通知

消息滚动通知主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器，

首先在index.js 中定义需要滚动的内容，这里的内容目前是静态写死的，后续需要改动 通过js访问后端服务动态修改msgList中的内容即可。

Page({
  data: {
    indicatorDots: true,

    msgList: ['放假通知： 春节临近，本机构将于1月26日放假，大家请勿跑空！','公告：按疫情放空要求，大家进出场馆请务必扫健康宝','公告：禁止穿皮鞋及其他尖锐易掉色的鞋子入场打球']
  },

})

然后在index.wxml中定义swiper组件

<view style="height: 5%;">
      <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
        <block wx:for="{{msgList}}">
          <swiper-item>
              <view class="swiper_item">{{item}}view>
            swiper-item>
        block>
      swiper>
    view>

代码中的msgList就是在index.js中定义的数据，for循环滚动定义内容 ，我们通过vertical属性（默认为false,实现默认左右滚动）设置为true来实现上下滚动。

对应的css样式写在wxss文件中，想要什么的样式可以自己调，我随便调的没什么美感。仅供参考

.swiper_container {
  background-color: #fff;
  margin-top: 4%;
  margin-left: 6%;
  margin-right: 6%;
  height: 70%;
  border-radius: 5px;
}

.swiper_item {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
  margin-top: 1%;
  margin-left: 2%;
}

好了，到这里第一个功能滚动通知消息就结束，我们开始第二个功能 图片轮播

图片轮播

图片轮播的原理和消息滚动通知一样，消息通知是上下滚动，图片轮播我们使用左右滚动

Page({
  data: {
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    circular: false,
    interval: 2000,
    duration: 800,
    previousMargin: 0,
    nextMargin: 0,
    imgUrls: ['/image/WechatIMG264.jpeg', '/image/WechatIMG265.jpeg', '/image/WechatIMG267.jpeg'],
    msgList: ['放假通知： 春节临近，本机构将于1月26日放假，大家请勿跑空！','公告：按疫情放空要求，大家进出场馆请务必扫健康宝','公告：禁止穿皮鞋及其他尖锐易掉色的鞋子入场打球']
  },

然后在wxml中定义swiper组件

<view class=" page-section-spacing " style="height: 20%;">
      <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" style="height: 100%; margin-left: 5%;">
        <block wx:for="{{imgUrls}}" wx:key="index">
          <swiper-item>
            <view class=" ">
              <image mode="scaleToFill" src="{{item}}">image>
            view>
          swiper-item>
        block>
      swiper>
    view>

最后定义css样式

.page-section-spacing {
  margin-left: 6%;
  margin-right: 6%;
  margin-top: 1%;
  border-radius: 5px;
  background-color: #fff;

}

到这里滚动消息通知和滚动显示图片就结束了，我们看一下效果，放不了动图，凑合看下吧。。。