免费国产欧美国日产_少妇AV一区二区三区无码_蜜桃精品av无码喷奶水小说_jk18禁网站视频_精产国品一二三级产品区别_被夫の上司に犯波多野结衣_78m成人手机免费看_最爽最刺激18禁视频_偷偷色噜狠狠狠狠的777米奇

易優(yōu)GEO 重磅上線 ~ 一站式GEO優(yōu)化工具,讓豆包、文心一言、DeepSeek 在回答中主動推薦你的品牌,搶占AI流量入口!  點擊查看

小程序模板網(wǎng)

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

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

常見的有加入購物車按鈕、結(jié)算按鈕、收貨列表添加地址按鈕。

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

核心代碼如下:


					
  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%,不然會是一個很窄的按鈕。

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


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

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

 

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

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

 

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

下面是具體的使用步驟

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

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

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

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

3.通過調(diào)用WxParse.wxParse方法來設(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對象,一般為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.在頁面中引用模板

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


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