2. 程式人生 > >小程式for迴圈位置擺放導致樣式出錯的坑

小程式for迴圈位置擺放導致樣式出錯的坑

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

樣式:

.teacher-list-container { width: 100%; height: 140rpx; display: flex; flex-direction: row; background: lightcyan;}.teacher-item-container { width: 150rpx; height: 140rpx; display: flex; background: lightcoral; flex-direction: column; align-items: center;}.image-teacher-avator { width: 90rpx
; height: 90rpx; border-radius: 100%; display: block; overflow: hidden;}.text-teacher-name { color: gray; font-size: 0.9rem; margin-top: 10rpx; width: 140rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;}

錯誤實現方式:

<view class="teacher-list-container" wx:for
="{{teacherList}}" wx:for-index="startindex" wx:if="{{startindex<4}}"> <view class="teacher-item-container"> <image class="image-teacher-avator" src='../images/user_head.jpg'></image> <text class="text-teacher-name">哈哈</text> </view> </view>

佈局中設定了flex, 並且是row橫向擺放的, 實現出來卻是縱向擺放了, 如圖:


正確實現方式:

<view class="teacher-list-container"> <view class="teacher-item-container" wx:for="{{teacherList}}" wx:for-index="startindex" wx:if="{{startindex<4}}"><imageclass="image-teacher-avator"src='../images/user_head.jpg'></image> <text class="text-teacher-name">哈哈</text> </view> </view>


最後說明: 之前將for迴圈放在外面容器, 實現效果都沒問題, 也是今天才遇到這樣, 尷尬~  (另外js檔案我就沒放上了, teacherList可自行定義)

相關推薦

小程式for迴圈位置擺放導致樣式出錯的坑

樣式:.teacher-list-container { width: 100%; height: 140rpx; display: flex; flex-direction: row; background: lightcyan;}.teacher-item-co

小程式-for迴圈遍歷的使用

.js檔案： Page({ /** * 頁面的初始資料 */ data: { datas:[ { title: '提交申請', txt: '選擇服務型別，填寫基本資訊，提交' }, { title: '材料稽核', txt: '收到電網企業電話，與

小程式for迴圈物件

<view class="container log-list"> <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this"> <view class="classname"

微信小程式 for迴圈巢狀怎麼取值

外層迴圈正常巢狀，內層迴圈巢狀的時候，把item.swiper_buy作為陣列迴圈wx:for="{{item.swiper_buy}}"，然後給item重新命名wx:for-item="cell"，內部迴圈的時候，就是{{cell.屬性}} <block wx:

小程式for迴圈巢狀請求介面問題

前段時間實現一個小程式滾動載入更多訊息的功能(利用scroll-view實現),其中有幾個需求需要特殊處理, 點選列表項可以進入詳情; 點選列表項資料狀態改變; 詳情返回列表項位置依舊在離開時的地方 如果點選時沒有資料狀態改變那麼可以直接使用onLoad

小程式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. 呼叫騰訊(百度、高德)地圖對應的請求地址，一般都會有獨一的key, 譬如   騰訊地圖呼叫地址： https://apis.map.qq.com/ws/geocoder/v1/?l

小程式 獲取地理位置-- wx.getLocation

話不多說直接上栗子   在 onShow裡面呼叫  onShow(){ this.getShopLocationPoint(); 在這裡呼叫是因為需要獲取 地址的時候可能使用者不授權，當取消授權的時候沒辦法拿到經緯度，此時我們要加判斷了 }   w

微信小程式獲取使用者位置以及城市

做小程式的時候，有需要維護使用者地理位置的地方，這時如果可以自動獲取當前位置，對於提升使用者體驗有很大的幫助，然後檢視官方文件，有個wx.getLocation介面，詳細說明如下： wx.getLocation(Object object) 呼叫前需要 使用者授權 

微信小程式之地理位置授權 wx.getLocation

1. 授權地理位置 點選按鈕，彈出授權彈窗，點選允許後，在以後的操作中可以隨時獲取到使用者地理位置 點選拒絕後，將無法獲取到地理位置，也無法再次點選彈出彈窗。 <button bindtap='onAuthLocation' >授權位置</button> onAut

微信小程式-文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{msgList}}">

微信小程式文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{

微信小程式獲取地理位置名稱

1.https://lbs.qq.com/qqmap_wx_jssdk/index.html，登入這個網址，申請祕鑰，並下載sdk 2.在小程式utils目錄下，新增qqmap-wx-jssdk.min.js 3.使用方法： // 引入SDK核心類 var QQ

小程式 獲取前幾名加樣式

很多網站的新聞，前幾條訊息都不同顏色來展示，來突出。 樣式按照自已想法寫，我這裡就沒有貼出來 　　wxml主要程式碼 <block wx:for="{{ranking}}" wx:for-index="index"> <view clas

小程式切換地圖位置

moveToLocation: function () { var that = this; wx.chooseLocation({ success: function (res) { let mobileLocation = { longitude: res.longitude

微信小程式實現流程進度的圖樣式功能

轉載地址：https://blog.csdn.net/rolan1993/article/details/79085530 最近正在做微信小程式，需要實現一個流程進度的圖樣式如下面

小程式獲取當前位置所在的城市

1、話不多說，直接上乾貨先來張目錄結構① index.wxml<view class="retailStore"> <view class="cnaps borderBottom"> <text>所在城市：</text

微信小程式中wxml和wxss的樣式說明，徹底搞定佈局排版

對於css不熟悉的Android程式設計師來說，開發微信小程式面臨的一個比較困難的問題就是介面的排版了。微信小程式的排版就跟wxml和wxss有關了，它們兩者相當於android的佈局檔案，其中wxml指定了介面的框架結構，而wxss指定了介面的框架及元素的顯示樣式。 一、wxml

小程式 獲取當前位置和天氣

"use strict";function _classCallCheck(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){functi

小程式獲取地理位置（經緯度以及選擇附近位置）

html部分 <view> <button bindtap="getLocal" wx:if="{{isLocal}}" bindtap="getLocal">獲取位置</button> <button open