小程序入門學習Demo
技術：小程序
概述
適合學習小程序的初級開發人員，入門教程
詳細
小程序周邊美甲美髮預定Democss
代碼主要寫了輪播+導航切換+返回頂部+滑動切換+下拉菜單選擇+用戶信息獲取。頁面佈局運用flex佈局。html
看代碼時建議打開小程序文檔，更好的瞭解組件或者Api。附上小程序文檔連接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.htmlweb
1、項目目錄
2、演示效果
代碼比較簡單，適合想學習小程序而不知道如何下手的同窗們，裏面沒有接口都是直接在data中模擬的數據。小程序
在微信開發者工具中能夠直接跑起來。api
3、程序實現具體步驟
輪播圖+導航切換+返回頂部 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,
})
}
})
4、其餘補充
裏面index中有部分註釋調的代碼，解開註釋一樣能夠跑起來。微信開發
主要介紹了小程序的一些組件的使用，和一些api的介紹，若是看着不舒服，能夠直接刪除。不會影響程序的運行。app
注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權
相關文章
- 1. 小程序雲開發入門demo
- 2. 微信小程序學習入門
- 3. 微信小程序學習：入門
- 4. 小程序學習筆記，入門（一）
- 5. 小程序入門學習16--上傳小程序至github
- 6. 微信小程序官方demo學習
- 7. Freemarker 入門小 demo
- 8. android入門小Demo
- 9. PHP入門小DEMO
- 10. CAS - 入門小 demo
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Neo4j數據庫入門教程 - NoSQL教程
- • YAML 入門教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 小程序雲開發入門demo
- 2. 微信小程序學習入門
- 3. 微信小程序學習：入門
- 4. 小程序學習筆記，入門（一）
- 5. 小程序入門學習16--上傳小程序至github
- 6. 微信小程序官方demo學習
- 7. Freemarker 入門小 demo
- 8. android入門小Demo
- 9. PHP入門小DEMO
- 10. CAS - 入門小 demo