小程序周边美甲美发预约Demo
代码主要写了轮播+导航切换+返回顶部+滑动切换+下拉菜单选择+用户信息获取。页面布局运用flex布局。
看代码时建议打开小程序文档，更好的了解组件或者Api。附上小程序文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
一、项目目录
二、演示效果
代码比较简单，适合想学习小程序而不知道如何下手的同学们，里面没有接口都是直接在data中模拟的数据。
在微信开发者工具中可以直接跑起来。
三、程序实现具体步骤
轮播图+导航切换+返回顶部 index.wxml
css;toolbar:false;
{{item.title}}</p>
<p>{{item.title}}
价格:¥{{item.price}}
{{item.langer}}</p>
<p>预约</p>
<p>{{item.title}}
价格:¥{{item.price}}
{{item.langer}}</p>
<p>预约</p>
<p>{{item.title}}
价格:¥{{item.price}}
{{item.langer}}</p>
<p>预约</p>
<p>{{item.title}}
价格:¥{{item.price}}
{{item.langer}}</p>
<p>预约</p>
<p>{{item.title}}
价格:¥{{item.price}}
{{item.langer}}</p>
<p>预约</p>
<p>top</p>
<pre><code>
;gutter:true
轮播图+导航切换index.wxss
html;gutter:true
/<strong>index.wxss</strong>/
.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;
}</p>
<p>.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;
}</p>
<pre><code>
;gutter:true
轮播图+导航切换index.js
js;gutter:true
//index.js
//获取应用实例
const app = getApp()</p>
<p>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)</p>
<p>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的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。
注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
Original: https://www.cnblogs.com/demodashi/p/10503431.html
Author: demo例子集
Title: 小程序入门学习Demo
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/551595/
转载文章受原作者版权保护。转载请注明原作者出处！