小程序静态页面需要服务器吗,小程序基础-静态页面小程序

一、准备工作

二、程序实现步骤

index.wxml为主页程序

1.轮播图的实现

style="width:100%;background-color:black;"

/>

index.js事件data: {

imgUrls: [

'../image/a2.png',

'../image/a1.png'

],

indicatorDots: true,

autoplay: true,

interval: 5000,

duration: 1300,

bg: '#C79C77',

Height: ""     //这是swiper要动态设置的高度属性

},

imgHeight: function (e) {

var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度

var imgh = e.detail.height;//图片高度

var imgw = e.detail.width;//图片宽度

var swiperH = winWid * imgh / imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度

this.setData({

Height: swiperH//设置高度

})

},

运行效果：

index.wxml

左右滑动页面实现

index.wxss/* 左右滑块  */

.uploadWrap{height:111rpx; width:100%; display: flex; display: -webkit-box; flex-direction: column;}

.upload_Item{ width: 168rpx; height: 111rpx;  flex: 1;}

.upload_Item_img{ width: 168rpx; height: 111rpx;}

/*

实现效果

index.js事件

拨打电话悬浮窗口设置电话号calling: function () {

wx.makePhoneCall({

phoneNumber: '13600496871',

})

},

运行效果

三、运行效果