1. 程式人生 > >微信小程式_簡單頁面

微信小程式_簡單頁面

這篇文章主要是用微信小程式的一些基本元件,做了一個簡單的頁面來和小夥伴們一起分享,如果有問題歡迎留言。

先看下效果圖:


js程式碼部分:

Page({
  data: {
    names: [
    	'處置列表',
    	'約診',
    	'訊息',
    	'顧客資訊'
    ],
    navsText: [
    	'../appointment/appointment',
    	'../customer/customer',
    	'../disposalList/disposalList',
    	'../message/message',
    ]
  },
    //事件處理函式
  changeMotto: function(btn) {
    //獲取button的target下的id引數
    var path;

    var num = btn.target.id;

    switch(num)
    {
        case '0':
           path = '../appointment/appointment'
           break;
        case '1':
           path = '../customer/customer'
           break;
        case '2':
           path = '../disposalList/disposalList'
           break;
        case '3':
           path = '../message/message'
           break;
        default:
           break;
    }

    wx.navigateTo({
 
        // switch
      url: path
    })
  }
})

wxml程式碼部分:

<view class="downView">
	<image class="topImage" src="/image/圖片1.png"></image>
	<view class="nameBoard">
	<block wx:for="{{names}}" wx:for-index="index" >
		<swiper-item>
			<button class="nameBoard-btn" bindtap="changeMotto" id="{{index}}">
				<image class="nameBoard-image" src="/image/icon_API_HL.png"></image>
				<text class="nameBoard-text">{{item}}</text>
			</button>
		</swiper-item>
	</block>
	</view>
</view>


wxss程式碼部分:

.topImage {
	width: 100%;
}

.nameBoard {
  display: flex;
  margin-right: 20rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

.nameBoard swiper-item{
	flex: 1;
	margin: 10rpx;
	/*邊框: 1的寬度 實線 顏色*/
	border: 1rpx solid #98bf21;
}

.nameBoard-btn {
	line-height: 1;
	padding-left: 0;
	padding-right: 0;
}

.nameBoard-image{
	margin-top: 20rpx;
	height: 84rpx;
	width: 84rpx;
}

.nameBoard-text{
	display: block;
	font-size: 26rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	/*文字居中*/
	text-align:center;
	/*強制不換行*/
	/*white-space: nowrap;*/
}
例項程式碼demo:

感謝觀看,學以致用更感謝~

相關推薦

程式_簡單頁面

這篇文章主要是用微信小程式的一些基本元件,做了一個簡單的頁面來和小夥伴們一起分享,如果有問題歡迎留言。 先看下效果圖: js程式碼部分: Page({ data: { names

程式入門-簡單頁面編寫

前言 今天微信小程式正式上線,抱著學習新技術的心態開始第一次接觸微信小程式,無論外面怎麼吹微信小程式怎麼幹掉大量的原生的app,作為一個新的事物,存在就必定有其存在的價值,作為一個學習者要保持一個正確的學習心態。勇於的追求新的東西。 應用範圍 張小龍對小程

程式返回上級頁面時單個數據互動

微信小程式返回上級頁面時單個數據互動 實現原理:目標頁面利用小程式的頁面棧查詢上級頁面的page物件,並在不重新整理頁面的情況下修改上級頁面的data單條或多條資料。 實現程式碼: const wxCurrPage = getCurrentPages();//獲取當前頁面的頁面棧

程式跳H5頁面

主頁面:index.wxml 主頁面:index.js ↑跳轉到另一個wxml頁面→recharge.wxml recharge.wxml web-view中設定跳轉h5的連結,可以加上需要的引數: tips: 1.首先,web-view元件的屬性src,正如你說看到的,這個就是設

程式之1--頁面跳轉錯誤

而檢視app.json的時候,是正常的,頁面寫進入了app.json. 那麼就只能是url的問題了, 先看一下目錄: 這時候寫的跳轉url為,當前頁面為login,由login 頁面跳轉mailList頁面 url: '../usion/mailList/mailList',

程式從子頁面返回父頁面實現資料的區域性重新整理

問題描述 A頁面有一個儲存欄位的物件陣列items,從A頁面跳轉到B頁面,B頁面自定義欄位,並新增到items中。當返回A頁面時,顯示items的部分能夠區域性重新整理 items:[{name: '0', value: '姓名', checked: true, isNecessar

程式簡單介紹

微信小程式的簡單介紹 1.與HTML的區別 HTML 微信小程式 <div></div> <view></view>

程式-day03-註冊頁面、路由(程式頁面跳轉)、模組化

1.路由 wx.navigateTo    開啟新頁面 wx.redirectTo      頁面重定向 wx.switchTab      切換 Tab

程式_快速入門01

這段時間,嗯,大四課程已經結束了,工作也已經找到了,但是呢,到公司報道的時間還沒到,哈哈,馬上就開始人生的第一份工作了,怎麼說確實有點期待~ 在這段時間一方面為第一份工作做各種準備,另一方面也沒有停止自己對網際網路的探索,哈哈,於是乎,就決定折騰微信小程式了。 廢話就省了,哈哈。快速開始吧: 首先參照 微信小

程式中把頁面生成圖片

這個問題我上網搜了一下,答案有多種,但是真正能用的沒有幾何。很多答案都是雷同,有的網友也不負責任,直接拿來照抄,自己也不跑一遍看看。哎,不說了,說多了全是淚。希望我們的技術達人在分享的時候,能夠真實的走一遍程式碼,儘量能讓我等小白看的懂啊。鬧騷發過了,下面我們就進入正題吧(*^__^*) 嘻嘻……

程式——獲取當前頁面路由

getCurrentPages() 函式用於獲取當前頁面棧的例項,以陣列形式按棧的順序給出,第一個元素為首頁,最後一個元素為當前頁面。 let pages = getCurrentPages(); let currPage = null; if (pages.length) {

程式按鈕實現頁面間的跳轉

一.頁面wxml部分程式碼: <view><button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}

Java Web專案,Android和程式的初始頁面配置

Java Web專案 我們在Eclipse裡開了Java Web專案之後,Run As Tomcat或者Apache伺服器,本地執行,如果直接用http://localhost:8080訪問專案,會發現瀏覽器會開啟一個預設的頁面。 這個頁面是在什麼地方配置的呢?

程式選項卡頁面切換

選項卡效果切換如下:滑動即可對應切換 wxml程式碼 <view class='TabSwiper'> <view class='tab {{currentData

程式跳轉頁面的方式

微信小程式據我瞭解的有三種跳轉頁面的方式: 第一種: 跳轉頁面後有下圖所示的返回鍵,但是不能跳轉帶tabbar頁面(不知道tabbar頁面是什麼的請往下翻) var url = '../navigateTo/navigateTo'; //跳轉路徑 wx.navig

程式 之 “簡單自作輪播圖”

微信小程式輪播圖的是通過元件swiper來實現的 swiper 又叫 滑塊檢視容器 很多時候,我們只做頁面的時候都會用到圖片的輪播效果,剛開始接觸的時候也不會弄,所以直接進入主題,製作一個超簡單粗暴的輪播圖試試。 1. 新建一個專案,在所以需要新增輪播圖的介面(.wxm

程式在當前頁面設定其他頁面的資料

如果其他頁面用到的資料是 globalData, 那麼直接在當前頁面修改 globalData 資料即可。 如果其他頁面用到的資料是 storage, 那麼直接在當前頁面修改 storage 資料即可

程式的Page頁面的生命週期

我們知道Android中關於Activity的生命週期有什麼onCreate() onStart()  onResume() onStop()等,在android中Activity對應的是一個介面,那麼Page在微信小程式對應的也是一個介面,它也有屬於自己的宣告週期,我們檢視

動手擼一個程式學生課程表頁面

分解 仔細看完課程表頁面,我們可以把頁面分解: 1. 頂部一欄:週一到週日。 2. 左側一欄:第1-12節課。 3. 中間部分灰色虛線和午休的紅線。 4. 遍歷具體課程,並繪製。 開始寫程式碼 頂部: 使用wx的for迴圈

程式swiper滑動頁面實踐-類似於安卓ViewPager

一言不合,上效果 效果一 效果二 效果三 效果四 基本屬性 屬性名 型別 預設值 說明 最低版本 indicator-dots Boolean false 是否顯示面板指示點 indicator-color Colo