技术：小程序

概述

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

详细

代码下载：http://www.demodashi.com/demo/14956.html

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

代码下载：http://www.demodashi.com/demo/14956.html

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

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

微信小程序入门学习-- 简易Demo：计算器
简单学习下微信小程序官网简易教程 · 小程序 https://mp.weixin.qq.com/debug/wxadoc/dev/ 需要通过开发者工具,来完成小程序创建和代码编辑. 下载安装,运行 ...
微信小程序入门学习
前(che)言(dan): 近几天,微信小程序的内测引起了众多开发人员的热议,很多人都认为这将会成为一大热门,那么好吧,虽然我是一个小白,但这是个新玩意,花点时间稍稍钻研一下也是无妨的,谁让我没有女朋 ...
微信小程序入门学习之事件事件对象冒泡非冒泡事件（1）
这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件首先给出.js文件下代码 // pages/news/news.js Page({ /** ...
天河微信小程序入门《三》：打通任督二脉，前后台互通
原文链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=505&extra=page%3D1 天河君在申请到https ...
我的微信小程序入门踩坑之旅
前言更好的阅读体验请:我的微信小程序入门踩坑之旅小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是 ...
微信小程序入门篇
微信小程序入门篇: 准备工作 IDE搭建就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教 ...
微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
【小程序入门集锦】19，微信小程序个人帐号申请
个人账号与企业帐号相比,缺少支付等功能,与个人订阅号类似. 小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发. 下面我们就来说说 ...
天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

随机推荐

html-伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HDU-1170的解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1170 题意:要求输入几个案例,每个案例包含操作符(+,-,*,/),操作数(两个整数).现在要求分别输 ...
Person Re-ID行人重试别梳理
定义是利用计算机视觉技术判断图像或者视频序列中是否存在特定行人的技术.给定一张切好块的行人图像 (probe image,), 从一大堆切好块的图像 (gallery images) 中找到同一身份 ...
RFC2616-HTTP1.1-Status Code(状态码规定部分—译文)
part of Hypertext Transfer Protocol -- HTTP/1.1 RFC 2616 Fielding, et al. 10 状态码规定(Status Code Defin ...
SpringBoot使用数据库
这一篇简单介绍一下SpringBoot配置数据库的配置(依赖和application.properties),以下全是以本地数据库为例子,具体用户名密码地址都根据实际去修改. Mysql数据库: po ...
KenBurns特效组件KenBurnsView
KenBurns特效组件KenBurnsView KenBurns特效是一种静态图片展现方式.通过镜头缩放和平移的方式来展现图片,让静态图片产生动态视觉的效果.KenBurns特效可以通过KenB ...
Windows下bat脚本自动发邮件
摘要:说明:很多木马会利用自身的程序截取系统敏感文件或信息发往指定的邮箱,而blat并不是木马,它小巧却有强大的发邮件功能,可不要用它做违法事,感觉和木马功能有一拼!下面先看个具体的实例(在blat同 ...
[POI2012]Tour de Bajtocja
[POI2012]Tour de Bajtocja 题目大意: 给定一个\(n(n\le10^6)\)个点\(m(m\le2\times10^6)\)条边的无向图,问最少删掉多少条边能使得编号小于等于 ...
JavaScript 生成Guid函数
//获取长度为32的Guid function getGuid32() { var rt_str = String.fromCharCode(65 + Math.floor(Math.random() ...
Java 构造器遇到多个构造器时要考虑用构建器
静态工厂和构造器有个共同的局限性:它们都不能很好地扩展到大量的可选参数. 当一个类中有若干个必选属性和多个可选属性时,采用重叠构造器模式.JavaBeans模式或者Builder模式,但各有优劣. 当 ...

小程序入门学习Demo

概述

详细

代码下载：http://www.demodashi.com/demo/14956.html

一、项目目录

二、演示效果

三、程序实现具体步骤

四、其他补充

代码下载：http://www.demodashi.com/demo/14956.html

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

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

随机推荐

热门专题