小程序入门学习Demo -云博客

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

代码主要写了轮播+导航切换+返回顶部+滑动切换+下拉菜单选择+用户信息获取。页面布局运用flex布局。

看代码时建议打开小程序文档，更好的了解组件或者Api。附上小程序文档链接：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

一、项目目录

二、演示效果

代码比较简单，适合想学习小程序而不知道如何下手的同学们，里面没有接口都是直接在data中模拟的数据。

三、程序实现具体步骤

<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><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><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**/.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//获取应用实例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的介绍，如果看着不舒服，可以直接删除。不会影响程序的运行。