小程序模板網(wǎng)

微信小程序小技巧系列《十五》操作按鈕懸浮固定在底部,實(shí)現(xiàn)html格式內(nèi)容

發(fā)布時(shí)間:2018-02-06 16:37 所屬欄目:小程序開(kāi)發(fā)教程
一:微信小程序操作按鈕懸浮固定在底部
作者:秀杰,來(lái)自授權(quán)地址

常見(jiàn)的有加入購(gòu)物車(chē)按鈕、結(jié)算按鈕、收貨列表添加地址按鈕。

以收貨地址為例,將添加地址按鈕懸浮于最底部,這樣再多的地址,也不會(huì)被遮擋而看不見(jiàn)。

核心代碼如下:


					
  1. <button bindtap="add" type="primary" class="address-add">添加</button>
  2.  
  3. /*添加地址按鈕*/
  4. .address-add {
  5. position: fixed;
  6. bottom: 0;
  7. width: 100%;
  8. }

改用position: fixed之后,其中width需要設(shè)置為100%,不然會(huì)是一個(gè)很窄的按鈕。

考慮到按鈕自身占據(jù)46px高度,因此地址列表還需要加上如下樣式


					
  1. /*地址列表包裝容器*/
  2. .address-list {
  3. margin-bottom: 46px;
  4. }

這樣一來(lái)最后一個(gè)地址點(diǎn)通網(wǎng)絡(luò)的設(shè)為默認(rèn),編輯,修改按鈕可以完整顯示出現(xiàn)了。

 

二:實(shí)現(xiàn)html格式內(nèi)容
 

最近項(xiàng)目上遇到在微信小程序里需要顯示新聞內(nèi)容,新聞內(nèi)容是通過(guò)接口讀取的服務(wù)器中的富文本內(nèi)容,是html格式的,小程序默認(rèn)是不支持html格式的內(nèi)容顯示的,那我們需要顯示html內(nèi)容的時(shí)候,就可以通過(guò)wxParse來(lái)實(shí)現(xiàn)。

 

下載完之后我們需要用到目錄下的wxParse文件夾,把他拷貝到我們的項(xiàng)目目錄下

下面是具體的使用步驟

1.在app.wxss全局樣式文件中,需要引入wxParse的樣式表

@import "/page/wxParse/wxParse.wxss";

2.在需要加載html內(nèi)容的頁(yè)面對(duì)應(yīng)的js文件里引入wxParse

var WxParse = require('../../wxParse/wxParse.js');

3.通過(guò)調(diào)用WxParse.wxParse方法來(lái)設(shè)置html內(nèi)容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數(shù)據(jù)名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數(shù)據(jù)(必填)
* 4.target為Page對(duì)象,一般為this(必填)
* 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選)
*/
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':13
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var article = res.data[0].post;
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})
4.在頁(yè)面中引用模板

<import src="../../wxParse/wxParse.wxml"/>


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/21661.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢