微信小程序学习（一）：初步使用-实现底部菜单栏；轮播图；下拉框

微信小程序学习（一）：初步使用

因为是第一次用这个东西，在看了一部分模板和代码进行学习

一、底部菜单栏

先进行底部菜单栏设置，在app.json中进行配置

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "pages/icon/list(1).png",
        "iconPath": "pages/icon/list.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "pages/icon/my(1).png",
        "iconPath": "pages/icon/my.png",
        "pagePath": "pages/user/user",
        "text": "个人"
      }
    ]
  }

其中的图标是在这个网址下的：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
这个是效果图

这个是app.json的总代码

二、轮播图

index.wxml的代码

<!--index.wxml-->
<!-- 轮播图 -->
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" active/>
<progress percent="60" color="pink" />
<progress percent="80" active />

index.js的代码

//index.js
Page({
  data: {
    imgUrls: [
      '../image/banner_1.jpg',
      '../image/bg.jpg',
      '../image/xuan.jpg'
    ],
    indicatorDots: true,//是否显示面板指示点
    autoplay: true,//是否自动播放
    interval: 2000,//播放间隔
    duration: 1000,//滑动动画时长
  }
})

这个是效果图

三、下拉框

这个是wxml的代码

<!--pages/user/user.wxml-->
<!--选择框-->
<view class="product-list">
  <!--条件选择-->
  <view class="choice-bar">
    <view bindtap="opens" data-item="1" class="chioce-item" hover-class="click-once-opaque">{{start}}
      <image class="icon-chioce" src="{{!isstart?openimg: offimg}}"></image>
    </view>
    <view class="sorting-list{{!isstart?' chioce-list-hide':' chioce-list-show'}}">
      <view wx:for="{{slist}}" catchtap="onclicks1" data-index="{{index}}" class="sorting-item" hover-class="click-once"  wx:key="userInfoListId" >{{item.name}}</view>
    </view>
 </view>
</view>

这个是js文件

// pages/user/user.js
  Page({
    data: {
      start: "起始地",
      slist: [
        { id: 1, name: "第一类" },
        { id: 1, name: "第二类" },
        { id: 1, name: "第三类" },
        { id: 1, name: "第四类" },
        { id: 1, name: "第五类" },
      ],
      isstart: false,
      openimg: "../icon/list(3).png",
      offimg: "../icon/list(4).png"
  },
    opens: function (e) {
    switch(e.currentTarget.dataset.item) {
      case "1":
    if(this.data.isstart) {
      this.setData({
        isstart: false,
      });
    }
        else {
      this.setData({
        isstart: true,
      });
    }
        break;
    }
  },
  onclicks1: function (e) {
    var index = e.currentTarget.dataset.index;
    let name = this.data.slist[index].name;
    this.setData({
      isstart: false,
      isfinish: false,
      isdates: false,
      start: this.data.slist[index].name,
      finish: "目的地"
    })
  }
})

这个是效果图