技术：小程序
 

概述

适合学习小程序的初级开发人员，入门教程

详细

小程序周边美甲美发预约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的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

小程序入门学习Demo的更多相关文章

  1. 微信小程序入门学习-- 简易Demo：计算器

    简单学习下微信小程序 官网 简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...

  2. 微信小程序入门学习

    前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...

  3. 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件（1）

    这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...

  4. 天河微信小程序入门《三》：打通任督二脉，前后台互通

    原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...

  5. 我的微信小程序入门踩坑之旅

    前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...

  6. 微信小程序入门篇

    微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...

  7. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 【小程序入门集锦】19，微信小程序个人帐号申请

    个人账号与企业帐号相比,缺少支付等功能,与个人订阅号类似.   小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发.   下面我们就来说说 ...

  9. 天河微信小程序入门《四》：融会贯通，form表单提交数据库

    天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

随机推荐

  1. 依赖配置中心实现注有@ConfigurationProperties的bean相关属性刷新

    配置中心是什么 配置中心,通过key=value的形式存储环境变量.配置中心的属性做了修改,项目中可以通过配置中心的依赖(sdk)立即感知到.需要做的就是如何在属性发生变化时,改变带有@Configu ...

  2. Alpha(9/10)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  3. 给有C或C++基础的Python入门 ：Python Crash Course 4 操作列表 4.1--4.3

    操作列表,也就是遍历列表.本章我们要学的就是如何遍历列表. 4.1--4.2 遍历列表 遍历列表,用for循环. 不同于C++或者C语言的for循环,Python的for循环更容易让人理解. 看一个例 ...

  4. BZOJ.2565.[国家集训队]最长双回文串(Manacher/回文树)

    BZOJ 洛谷 求给定串的最长双回文串. \(n\leq10^5\). Manacher: 记\(R_i\)表示以\(i\)位置为结尾的最长回文串长度,\(L_i\)表示以\(i\)开头的最长回文串长 ...

  5. 洛谷P1880 石子合并（区间DP）（环形DP）

    To 洛谷.1880 石子合并 题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1 ...

  6. NEO区块链-DAPP开发直通车-第零篇

    什么是DAPP DAPP 是以太坊发明的词汇 Decentralized Application. 目前基于区块链技术开发的应用程序广泛的接受使用了这一名称.   NEL将为开发DAPP提供全面的服务 ...

  7. Spring AOP 配置通知方法的时候如何处理方法重载

    如何在method属性里指定重载方法中的某一个?

  8. ReactNative 常见红屏黄屏及终端报错

    刚开始接触RN,总是会遇到各种红屏黄屏报错,红屏是fatal error(程序无法正常运行),黄屏是Warming(非致命错误,程序可以运行但是存在潜在问题可能在某些情况下将导致fatal error ...

  9. C语言基础三（敲打键盘、寻找资料，循环语句）

    有人在学C语言或者其他语言的时候,大家都会说逻辑思维的硬道理,认为没有逻辑思维的人走不远,那么小编这里借助简单的if...else... 英文解释if(如果),else(否则) ----------- ...

  10. usaco-5.3.3Network of Schools 校园网

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意如果 B 在 A 学校的分发列表中,那么 A 不必也在 B 学校的列表中. 你要 ...