2. 程式人生 > >小程式input框中加入小圖示

小程式input框中加入小圖示

阿新 • • 發佈：2019-01-21

最近入坑小程式，要求在小程式的輸入框中展示一個小圖示，頁面如下:


然後按照，html頁面中的做法，在input框中添加了background-image屬性，出乎意料的事，小程式報了下邊這樣一個錯誤:


emmmm 好像小程式的background-image屬性並不給力啊，然後查閱相關資料後，放棄了background-image屬性。

然後另闢蹊徑，由於小程式中，好像只有image標籤才能載入本地圖片，所以考慮使用image標籤來實現，大致思路就是在一個view中，左邊是image,右邊是input框，wxml頁面如下:

<view class="loginBox"> <
view style='width:70%;margin-left:15%;'> <view style='border-top-left-radius:8px;border-top-right-radius:8px;width:100%;height:38px;display:inline-block;background:#fff;'> <view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/user_icon.png' style
='display:inline;' mode="aspectFit"></image></view> <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='使用者名稱'></input> </view> <view style='width:100%;height:38px;display:inline-block;background:#fff;margin-top:-5px;border-top:1px solid #f8f8f8;border-bottom-left-radius:8px;border-bottom-right-radius:8px;'>
<view style='width:20%;display:inline-block;height:100%;'><image src='../../assets/images/pass_icon.png' style='display:inline' mode="aspectFit"></image></view> <input style='width:80%;display:inline-block;height:100%;' placeholder-style='font-size:12px;' placeholder='密碼'></input> </view> </view> </view>由於太懶，所以直接把樣式寫在了wxml頁面，嗯，最後頁面效果如第一張圖所示。若有問題，歡迎討論~~

相關推薦

小程式input框中加入小圖示

最近入坑小程式，要求在小程式的輸入框中展示一個小圖示，頁面如下:然後按照，html頁面中的做法，在input框中添加了background-image屬性，出乎意料的事，小程式報了下邊這樣一個錯誤:emmmm 好像小程式的background-image屬性並不給力啊，然後查

input框中加入小圖示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

微信小程式input框在某些手機上獲取資料失敗

因為加了有資料為空不允許提交的判斷，測試的時候發現有的手機總是提示有資料為空，不能提交， 測試之後發現是填寫手機號的input框type型別為number，然後寫了三個框分別獲取資料， type型別分別為digit（帶小數點的數字鍵盤）、number、text，結果如下圖： 只有t

使用font-awesome 在input框中增加一個圖示

比如:     在登入框增加一個使用者頭像 ,提示使用者輸入使用者名稱 <html> <link href="http://libs.baidu.com/fontawesome/4.4.0/css/font-awesome.min.css"

微信小程式之----載入中提示框loading

微信小程式之----載入中提示框loading wx.json Page({ /** * 頁面的初始資料 */ data: { }, onLoad: function (options) { // 欄目分類請求介面 var lanmu = this;

小程式 input(輸入框) 固定在底部 獲取焦點 上推頁面

使用fixed定位將input固定在螢幕底部，同時為了不讓頁面整體上移，需要將input的adjust-position屬性設為false。 只是，這麼做的話會導致底部的輸入框也無法上移。 從而被拉起的小鍵盤蓋住。 從官方社群整理來一個方法，能夠在小鍵盤拉起的同時將底部的

小程式for迴圈中input事件的處理

bindManual:function(e){ var that=this; var id = e.currentTarget.id; console.log(id) that.setData({ num: e.detail.value }) console.log(that.data.num) }, bi

小程式實現 點選加入購物車 紅點拋物線飄入

1:實現效果；   2：index.wxss //只寫紅點樣式 .good_box { width: 30rpx; height: 30rpx; position: fixed; border-radius: 50%; overflow: hidden

promise和callback在微信小程式非同步呼叫中的應用

本部落格所有文章採用的授權方式為 自由轉載-非商用-非衍生-保持署名 ，轉載請務必註明出處，謝謝。 宣告： 本部落格歡迎轉發,但請註明出處，保留原作者資訊 部落格地址：孟阿龍的部落格 所有內容為本人學習、研究、總結。如有雷同，實屬榮幸 背景 近期，因為工作需要在研

微信小程式彈框效果解析

先上程式碼 wxml部分： <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上彈起</text> </view> <

微信小程式input為數字鍵盤

微信小程式input為數字鍵盤 微信小程式的 input 有個屬性叫 type，這個 type 有幾個可選值： text：不必解釋 number：數字鍵盤（無小數點） idcard：數字鍵盤（無小數點、有個 X 鍵） digit：數字鍵盤（有小數點） 注意：

小程式彈框wx.showModal的使用

if (!logined) { wx.showModal({ title: '提示', content: '您還沒登入登入車掌櫃, 是否前往登入', confirmText: '前往登入', confirmColor: '#F87

微信小程式輸入框屬性 cursor-spacing 問題

微信小程式輸入框屬性 cursor-spacing 問題 問題描述 微信小程式給輸入框提供了屬性 cursor-spacing，用處是聚焦時游標離軟鍵盤的距離，但是在安卓機子上會出現不太好使，比如，沒有達到預期的設定值，還有滑動到底部，設定的值不起作用。 解決方

微信小程式輸入框會字型顯示不全或者換行

微信小程式輸入框會字型顯示不全或者換行 問題描述 有的時候不同的裝置上會出現微信小程式輸入框表現不一致，比如：換行，字型顯示不全 解決方案 用開發者工具除錯發現，input，textarea 有預設的 weight or height，並且是 rem 為單位

小程式input密文

type = "password"表示密文  這是小程式自帶的密文方法。也就是在這上面做文章。 <input type="ifshow" placeholder="請輸入登入密碼"/> ifshow: "password", //表示密文 //&nbs

微信小程式wepy框架中父元件與子元件通訊和互動

官網上描述： $broadcast $broadcast事件是由父元件發起，所有子元件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序。 $emit $emit與$broadcast正好相反，事件發起元件的所有祖先元件會依次接收到$emit事件。 $in

小程式雲開發中資料庫的資料分段和顯示圖片

這是一個比較久遠的問題，查看了官方解釋也沒有弄好，網上搜的試了也不對，這裡給出一種方法，比較笨，但是可以實現。 玩過小程式雲開發的都知道雲開發控制檯的資料庫是這樣的 這裡面的資料一般都不會太多，資料內容也不會太長，畢竟免費的資料庫沒有那麼大的容量，但是免費的東西作為一名技術咱也得用到極

一段小程式淺析Go中的併發，協程（goroutine)，sync.WaitGroup

package main import ( "fmt" "runtime" "sync" ) func main() { runtime.GOMAXPROCS(2) fmt.Println("begin typing") var wg sync.WaitGro

小程式swiper-item中banner有一部分被隱藏

可以直接給swiper元件新增高度 <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500" st

小程式在頁面中使用的相容ios的時間處理

最近在做小程式。又遇到了一個老問題，後臺返回的時間格式，如2018-09-08 10：00：00，直接處理成9月8日 10：00 在ios中報NAN。處理方式想在頁面中直接進行處理。 新建.wxss檔案 由於wxss不支援es6，所以不能使用es6語法 var fi