小程序周边美甲美发预约Demo

代码主要写了轮播+导航切换+返回顶部+滑动切换+下拉菜单选择+用户信息获取。页面布局运用flex布局。

看代码时建议打开小程序文档，更好的了解组件或者Api。附上小程序文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

一、项目目录

 

二、演示效果

 

代码比较简单，适合想学习小程序而不知道如何下手的同学们，里面没有接口都是直接在data中模拟的数据。

在微信开发者工具中可以直接跑起来。

三、程序实现具体步骤

轮播图+导航切换+返回顶部 index.wxml

<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" style=‘width:100%;height:100%‘/>
</swiper-item>
</block>
</swiper>
<!-- <scroll-view> -->
<view class="item-view">
<view class="item-view1 {{currentTab == index ? ‘item-active‘ : ‘‘}}" wx:for="{{navLists}}" wx:key="index" style=‘width:{{100/navLists.length}}%‘ bindtap=‘swichNav‘ data-current="{{index}}">
<image class=‘item-img‘ src=‘{{item.imgUrl}}‘></image>
<text class=‘item-text‘>{{item.title}}</text>
</view>  
</view>
<!-- </scroll-view> -->
<swiper current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{cliHeight}}px" class=‘item-view0‘>
<swiper-item>
<view class=‘item-view2‘ wx:for="{{contentList}}" wx:key="index" data-id="{{item.id}}" bindtap=‘goDetail‘>
<view class=‘item-view3‘>
<image src="{{item.imgUrl}}"></image>
</view>
<view class=‘item-view4‘>
<view class=‘item-text1‘>{{item.title}}</view>
<view class=‘item-text2‘>价格:¥{{item.price}}</view>
<view class=‘item-text3‘>{{item.langer}}</view>
</view>
<view class=‘item-view5‘>
<text>预约</text>
</view>
</view> 
</swiper-item>
<swiper-item>
<view class=‘item-view2‘ wx:for="{{contentList}}" wx:key="index">
<view class=‘item-view3‘>
<image src="{{item.imgUrl}}"></image>
</view>
<view class=‘item-view4‘>
<view class=‘item-text1‘>{{item.title}}</view>
<view class=‘item-text2‘>价格:¥{{item.price}}</view>
<view class=‘item-text3‘>{{item.langer}}</view>
</view>
<view class=‘item-view5‘>
<text>预约</text>
</view>
</view> 
</swiper-item>
<swiper-item>
<view class=‘item-view2‘ wx:for="{{contentList}}" wx:key="index">
<view class=‘item-view3‘>
<image src="{{item.imgUrl}}"></image>
</view>
<view class=‘item-view4‘>
<view class=‘item-text1‘>{{item.title}}</view>
<view class=‘item-text2‘>价格:¥{{item.price}}</view>
<view class=‘item-text3‘>{{item.langer}}</view>
</view>
<view class=‘item-view5‘>
<text>预约</text>
</view>
</view> 
</swiper-item>
<swiper-item>
<view class=‘item-view2‘ wx:for="{{contentList}}" wx:key="index">
<view class=‘item-view3‘>
<image src="{{item.imgUrl}}"></image>
</view>
<view class=‘item-view4‘>
<view class=‘item-text1‘>{{item.title}}</view>
<view class=‘item-text2‘>价格:¥{{item.price}}</view>
<view class=‘item-text3‘>{{item.langer}}</view>
</view>
<view class=‘item-view5‘>
<text>预约</text>
</view>
</view> 
</swiper-item>
<swiper-item>
<view class=‘item-view2‘ wx:for="{{contentList}}" wx:key="index">
<view class=‘item-view3‘>
<image src="{{item.imgUrl}}"></image>
</view>
<view class=‘item-view4‘>
<view class=‘item-text1‘>{{item.title}}</view>
<view class=‘item-text2‘>价格:¥{{item.price}}</view>
<view class=‘item-text3‘>{{item.langer}}</view>
</view>
<view class=‘item-view5‘>
<text>预约</text>
</view>
</view> 
</swiper-item>
</swiper>
<view class=‘item-flxed‘ bindtap=‘onTop‘ wx:if="{{isDisplay}}">
<text>top</text>
</view>

轮播图+导航切换index.wxss

/**index.wxss**/
.item-view{
height: 80px;
background:rgba(0, 0, 0, .1);
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.item-view1{
text-align: center;
}
.item-img{
width: 45px;
height: 45px;
border-radius: 50%;
display: block;
margin:0 auto;
}
.item-text{
color: #FFF;
display: block;
margin-top: 5px;
font-size: 13px;
}
.item-active .item-text{
color: red;
}
.item-view0{
padding-left: 10px;
padding-right: 10px;
}
.item-view2{
display: flex;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #808080;
}

.item-view3{
width: 28%;
overflow: hidden;
}
.item-view3 image{
width: 100%;
height: 100%;
border-radius: 6px;
}
.item-view4{
margin-left: 13px;
width: 50%;
}
.item-text1{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 15px;
}
.item-text2{
margin-top: 10px;
color: red;
}
.item-text3{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-top: 5px;
font-size: 13px;
color: #808080;
}
.item-view5{
text-align: center;
line-height: 80px;
width: 20%;
}
.item-view5 text{
background: red;
display: inline-block;
color: #FFF;
text-align: center;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-size: 13px;
}
.item-flxed{
position: fixed;
bottom:10px;
right: 17px;
z-index: 100;
width: 45px;
height: 45px;
border-radius: 50%;
text-align: center;
line-height: 45px;
background: #808080;
}
.item-flxed text{
color: #FFF;
}

轮播图+导航切换index.js

//index.js
//获取应用实例
const app = getApp()

wx.setNavigationBarColor({
frontColor: ‘#ffffff‘,
backgroundColor: ‘#ff0000‘,
animation: {
duration: 400,
timingFunc: ‘easeIn‘
}
})
// wx.setBackgroundTextStyle({
//   textStyle: ‘light‘ // 下拉背景字体、loading 图的样式为dark
// })
// wx.showTabBarRedDot({
//   index: 2,
//   success(res){
//     console.log(res)
//   }
// })
const logger = wx.getLogManager({ level: 0 })
logger.log({ str: ‘hello world‘ }, ‘basic log‘, 100, [1, 2, 3])
logger.info({ str: ‘hello world‘ }, ‘info log‘, 100, [1, 2, 3])
logger.debug({ str: ‘hello world‘ }, ‘debug log‘, 100, [1, 2, 3])
logger.warn({ str: ‘hello world‘ }, ‘warn log‘, 100, [1, 2, 3])
console.debug(logger)

Page({
data: {
imgUrls: [
‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg‘,
‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg‘,
‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg‘
],
indicatorDots: true,
autoplay: true,
circular:true,
interval: 3000,
duration: 500,
navLists: [
{
id:‘0‘,
title:"推荐",
imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: ‘1‘,
title: "美甲",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: ‘2‘,
title: "美容",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: ‘3‘,
title: "美发",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
{
id: ‘4‘,
title: "美睫",
imgUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg",
},
],
contentList:[
{
id:‘1‘,
imgUrl:‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548218630394&di=8a330378ca66ccd466ab6ad5b3726560&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FZZ5EGyuUCp9hBPk6_s4Ehg%3D%3D%2F5727171351132208489.jpg‘,
title:‘秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲秋季特价美甲‘,
price:‘188‘,
langer:‘我们追求卓美我们追求卓美我们追求卓美‘
}
],
currentTab:0,
scrollTop: 0,
isDisplay:false
},
//滑动切换样式
switchTab:function(e){
this.setData({
currentTab: e.detail.current
});
},
//点击切换文字样式
swichNav:function(e){
let cur = e.currentTarget.dataset.current;
if (this.data.currentTaB == cur) {
return false;
}else{
this.setData({
currentTab: cur
})
}
},
//高度自适应
onLoad: function () {
var that = this;
let arr = [];
for(let i = 0; i< 10;i++){
arr.push(this.data.contentList[0])
}
this.setData({
contentList:arr
})
let cliHeight = arr.length * 101;
that.setData({
cliHeight: cliHeight
});
},
onPageScroll: function (e) {
if (e.scrollTop > 500){
this.setData({ isDisplay: true})
}else{
this.setData({ isDisplay: false })
}
},
//返回顶部
onTop: function (e) {
wx.pageScrollTo({
scrollTop: 0
})
},
//跳转详情页
goDetail:function(e){
let id = e.currentTarget.dataset.id;
wx.navigateTo({
url: ‘../detail/detail?id=‘ + id,
})
}
})

四、其他补充

里面index中有部分注释调的代码，解开注释同样可以跑起来。

主要介绍了小程序的一些组件的使用，和一些api的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。