技術：小程序

概述

適合學習小程序的初級開發人員，入門教程

詳細

代碼下載：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大師發表，拒絕轉載，轉載需要作者授權

轉載于:https://www.cnblogs.com/demodashi/p/10503431.html

總結

以上是生活随笔為你收集整理的小程序入门学习Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。