微信小程序页面数据布局

1.在wxml里面写入，前端布局页面。

 <view class="add"><block wx:for="{{goodslog}}"><view  class="add1"><navigator url="/pages/desn/desn?id={{item.id}}"><image class="pic"  src="/img/456.webp"   style="width: 390rpx; height: 390rpx;"></image></navigator><text style="font-size: 20px;">{{item.name}}</text><text style="color: red;">{{item.price}}元</text></view></block></view>

2.在js页面中写入读取中数据库中的数据。

 onLoad: function () {let that = this;wx.request({url: 'http://www.tp.com/index.php/list',header:{'content-type':'application/json'},method:'get',success(res){console.log(res.data.data)that.setData({goodslog:res.data.data})}})},

3.在wxss做前端页面数据布局（弹性盒子）

/* 大盒子布局 */
.add{margin-top: 5px;width: 100%;height: 600px;/* background-color: pink; */display: flex;flex-wrap: wrap;
}
/* //小盒子布局 */
.add1{
display: flex;
width: 49%;
justify-content: space-around;
flex-direction: column;
border:black solid  0.5px;
/* background-color: turquoise; */
}.box2{width: 100%;height: 200px;/* background-color: pink; */display: flex;flex-direction: row;flex-wrap: wrap;padding-left: 15px;
}

微信小程序页面数据布局相关推荐

微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
php 微信公众号跳转小程序,微信小程序页面跳转功能
本文主要介绍微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法,结合具体实例形式总结分析了微信小程序页面跳转及列表item项跳转页面的相关操作技巧,需要的朋友可以参考下. 一.效果图从 ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
小程序向Java传值,微信小程序页面传值详解
微信小程序页面传值详解一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
vue用公共组件页面传值_微信小程序页面传值、组件间通信总结
小程序是一种新的开放能力,开发者可以快速地开发一个小程序.小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验.对于微信小程序,前端开发应该不陌生,目前也是非常火,很多公司都会进行开发.对 ...
微信小程序observers数据监听器的使用
微信小程序observers数据监听器的使用数据监听器可以用于监听和响应任何属性和数据字段的变化. 1.observers使用的前提条件在微信小程序中数据监听器的使用是有几个前提条件的,否则是无法 ...
微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...

微信小程序页面数据布局

微信小程序页面数据布局相关推荐

最新文章

热门文章