技术：小程序

概述

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

详细

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

随机推荐

forward 和redirect
http://www.cnblogs.com/davidwang456/p/3998013.html
HDFS格式化namenode后启动集群datanode不启动
这是因为格式化namenode之后,namenode节点中VERSION的ClusterID会改变!!! 解决办法: 1.打开namenode节点的hdfs-site.xml文件,查看你的nameno ...
001.Oracle安装部署-本地文件系统
一环境准备安装包:linux.x64_11gR2_database_1of2.zip linux.x64_11gR2_database_2of2.zip 二安装Oracle准备 2.1 用户名/ ...
switch反汇编
以下总结为debug模式
Linux学习笔记6
less 命令空格或者 ctrl+f 前进一屏 ctrl+b 回退一屏回车前进一行 /String 查找含有string 字符串的页 ?String 同上 <反方向查找> ...
涂鸦之作WanAndroid第三方APP
Wan Android App Introduction 我的涂鸦之作,正如名字一样这个一个WanAndroid 的第三方Android客户端,采用MVP架构+Kotlin语言+一大堆轮子.现在的代 ...
C#-常用知识点
1.日期相关获取英文月份名称 : DateTime.Now.ToString("MMMM") 1.1 各个字母所代表的意思 1.MM:月份 2.mm:分钟 3. MMMM:文字形 ...
Java笔记（十四）并发基础知识
并发基础知识一.线程的基本概念线程表示一条单独的执行流,它有自己的程序计数器,有自己的栈. 1.创建线程 1)继承Thread Java中java.lang.Thread这个类表示线程,一个类可以 ...
HTML5：在移动端禁用长按选中文本功能
很多时候,我们在写的手机页面需要用户进行长按然后响应一个事件.但是在微信中用户的长按操作被默认为谈出来一个复制的选项.那么这个时候如何去禁止这个东西呢? 其实很简单,方法看下面: 只需要在你需要禁止的 ...
css3中linear-gradient()的使用
用线性渐变创建图像. 如果想创建以对角线方式渐变的图像,可以使用 to top left 这样的多关键字方式来实现. 示例代码: linear-gradient(#fff, #333); linear ...

小程序入门学习Demo

概述

详细

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

一、项目目录

二、演示效果

三、程序实现具体步骤

四、其他补充

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

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

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

随机推荐

热门专题