技术：小程序

概述

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

详细

代码下载：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是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...

随机推荐

log4j和logback会互相冲突
当两个都存在同一个项目的时候,本来应该走log4j的日志可能会走logback,导致日志级别问题等错误. 如果出现日志级别不受配置文件控制,可根据源代码走,找到原因.
Booksort POJ - 3460 （IDA*）
Description The Leiden University Library has millions of books. When a student wants to borrow a ce ...
HDU-1247 Hat’s Words (暴力)【Trie树】
<题目链接> 题目大意: 给你一些单词,要求输出将该单词完全分成前.后两个单词之后,若这两个单词都在单词库中出现,则输出该单词. 解题分析: 将每个单词的每一位能够拆分的位置全部暴力枚举一 ...
[ 低危 ] mt网CRLF
漏洞: xxx.meituan.com/%0d%0aevilheadername:%20inject_by_whoamisb 原理猜测: 收到xxx二级域名的时候,会location跳转到该域名(这是 ...
switch反汇编
以下总结为debug模式
【C#】获取URL上的参数
图是不知道什么时候截的,给不了原链接了QAQ
SpringBoot学习历程
新年新气象,更新了一下本人所有写的关于SpringBoot的文章目录,感谢大家长期以来的支持,在接下来的日子还会不定期的进行更新. 入门使用IntelliJ Idea新建SpringBoot项目 S ...
366. Fibonacci
描述查找斐波纳契数列中第 N 个数. 所谓的斐波纳契数列是指: 前2个数是 0 和 1 . 第 i 个数是第 i-1 个数和第i-2 个数的和. 斐波纳契数列的前10个数字是: 0, 1, 1, 2 ...
spark实时计算性能优化
1. 计算提供两种模式,一种是jar包本地计算.一种是JSF服务. 2. 第一步是引入spark,因与netty.JDQ均有冲突,解决netty冲突后,隔离计算为单独服务.已在线上,因storm也 ...
url两次编码
encodeURI函数采用UTF-8对URL进行编码,所以如果服务器在进行解码时使用的是其他的编码方式就会出现乱码,默认的服务器配置的解码字符集都不是UTF-8,所以大部分情况下地址栏提交中文查询参数 ...

小程序入门学习Demo

概述

详细

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

一、项目目录

二、演示效果

三、程序实现具体步骤

四、其他补充

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

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

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

随机推荐

热门专题