小程序基礎-靜態頁面小程序

概述

完成一個公司的展示和聯系功能的小程序，屬於靜態頁面展示功能小程序。

詳細

代碼下載：http://www.demodashi.com/demo/13768.html

 

一、准備工作

軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

二、程序實現步驟

 

index.wxml為主頁程序

 

1.輪播圖的實現

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'
style="width:100%;"
/>  
</swiper-item>
</block>
</swiper>

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

左右滑動頁面實現

<view class='business'>
<image class='bus' src='../image/3.png'></image>
<scroll-view scroll-x="true">
<view class="uploadWrap" scroll-x="true" >
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4a.png" bindtap='a4' ></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4b.png" bindtap='b4'></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img" src="../image/4c.png" bindtap='c4'></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4e.png" bindtap='e4'></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4f.png" bindtap='f4'></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4g.png" bindtap='g4'></image>
</view>
<view class="upload_Item">
<image class="upload_Item_img"  src="../image/4d.png" bindtap='d4'></image>
</view>
</view>
</scroll-view>
<view class='news'>

 

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;}
/*

實現效果

<!-- 打電話、消息懸浮窗 -->
<view>
<contact-button type="default-dark" size="20" session-from="weapp" class="img-plus-style zindex100 yc">
</contact-button>
<image src="../image/news2.png" class="img-plus-style"></image>
<image src="../image/call2.png" class="img-plus-style1" bindtap="calling"></image>
</view>

 

index.js事件

撥打電話懸浮窗口設置電話號

calling: function () {
wx.makePhoneCall({
phoneNumber: '13600496871',
})
},

運行效果

 

三、運行效果

 

代碼下載：http://www.demodashi.com/demo/13768.html

注：本文著作權歸作者，由demo大師發表，拒絕轉載，轉載需要作者授權