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

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

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

一、底部菜单栏

先进行底部菜单栏设置，在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: "目的地"
})
}
})

这个是效果图