微信小程序weui在线入门教程-WeUi表单组件-list列表

效果图

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

wxml代码

<view class="page"><view class="page__hd"><view class="page__title">List</view><view class="page__desc">列表</view></view><view class="page__bd"><view class="weui-cells__title">带说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带图标、说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view><view class="weui-cell"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator></view><view class="weui-cells__title">带说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view><view class="weui-cells__title">带图标、说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view></view></view>

欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通

微信小程序weui在线入门教程-WeUi表单组件-list列表相关推荐

微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua wxml代码 <view class ...
微信小程序weui在线入门教程-WeUi导航相关-navbar
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua Js代码 data: {tabs: [&q ...
微信小程序云开发入门教程
小程序的云开发: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 ...
微信小程序保姆级入门教程
一.微信小程序特点 -小程序依赖微信快,因为免去下载和安装小,一个包不能超过2M 强,微信有什么能力它也拥有广,传播微信圈子近10亿用户 QQ 微信支付宝字节跳动美团鸿蒙都有类似小程序 ...
微信小程序云开发入门教程-服务开通
我们在上篇教程里介绍了小程序账号注册及工具下载安装的功能,本篇我们介绍一下如何开通云开发. 步骤一:开通云开发打开微信开发者工具,可以看到工具栏里有个云开发的图标一开始我的这个图标是灰色的,提示已 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
vue 美团框架_美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程本教程只针对新手,老鸟勿喷. 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的 github上克隆到本地, 安装一下依赖,即可直接 ...

微信小程序weui在线入门教程-WeUi表单组件-list列表

效果图

微信小程序weui在线入门教程-WeUi表单组件-list列表相关推荐

最新文章

热门文章