新闻小程序3——个人中心页面设计

参考书：微信小程序开发实战——周文洁

在my.wxml中添加元素

<!--pages/my/my.wxml--><!--登陆面板-->
<view id='myLogin'><block><image id='myIcon' src='{{src}}'></image><text id='nickName'>{{nickName}}</text></block>
</view><!--我的收藏-->
<view id='myFavorites'><text>我的收藏（2）</text><!--收藏的新闻列表--><view id='news-list'><view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}"><image src='{{news.poster}}'></image><text>⚫️{{news.title}}——{{news.add_date}}</text></view></view>
</view>

在xss中确定样式

/* pages/my/my.wxss */#myLogin{background-color: #bdc4ca;height: 400rpx;display: flex;flex-direction: column;align-items: center;justify-content: space-around;
}
#myIcon{width: 200rpx;height: 200rpx;border-radius: 50%;
}
#nickName{color: white;
}
#myFavorites{padding: 20rpx;
}#news-list{min-height: 600rpx;padding: 15rpx;
}
/**/
.list-item{display: flex;flex-direction: row;border-bottom: 1rpx solid gray;
}
.list-item image{width: 230rpx;height: 150rpx;margin: 10rpx;
}
.list-item text{width: 100%;line-height: 60rpx;font-size: 12pt;
}

在js中写入数据

data: {//临时微信用户昵称和头像nickName: '未登录',src: '/images/my.png',//临时新闻数据newsList: [{id: '1',title: 'miaomiao',poster: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',add_date: '2021-04-07'},{id: '2',title: 'mcoder',poster: 'https://ask.qcloudimg.com/http-save/2553644/7sy2zl7ei8.jpeg?imageView2/2/w/1620',add_date: '2021-04-07'}]},

效果：

新闻小程序3——个人中心页面设计相关推荐

考研刷题小程序云开发实战-页面设计与制作（题库首页、排名页、我的）
目录前言 1.创建并配置页面 2.题库首页 3.排名页和我的总结前言为啥你的UI界面感觉乱?对于小程序开发者来说,特别是对于初阶开发者或者初学者,排版的好坏是这个阶段核心要考虑的问题,也就是细 ...
11.DIY可视化-拖拽设计1天搞定主流小程序-小程序首页公告详情页面
小程序首页公告详情页面本教程均在第一节中项目启动下操作小程序首页公告详情页面前言一.添加界面,布局 1.设定组件样式: 数据绑定二. 新增接口三:绑定公告四.查看效果五.动态参数设置 ...
基于微信小程序的大学生心理健康测试设计与实现 .docx
目录 1 绪论 3 1.1 项目开发背景 3 1.2 项目开发意义 3 1.3 项目主要的内容 4 2 相关技术介绍及系统环境开发条件 5 2.1相关技术介绍 5 2.2系统环境开发条件 6 3 系统 ...
ssm基于微信小程序的恋上诗词设计与实现毕业设计源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
ssm+mysql+基于微信小程序的恋上诗词设计与实现毕业设计-附源码011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战
Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战说明:Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战,优惠券是一种常见的促销方式,在规定的周期内购买对应商品类型和额度的商品 ...
（附源码）ssm基于微信小程序的恋上诗词设计与实现毕业设计 011431
基于SMM微信小程序的恋上诗词设计与实现摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,恋 ...
微信小程序页面上面的名字怎么改_微信小程序如何动态修改页面标题——已解决...
微信小程序初始化的标题我们知道实在全局.json文件中设置的,如果修改全局设置中的navigationBarTitleText,我们全部页面的标题都会统一改变: 例如: "navigatio ...
小程序的ui应该怎么设计?
UI设计中小程序的设计是很多UI设计师在工作中会碰到的,一款好的小程序设计页面,会带来效果很好的用户体验,下面小编就为大家详细的分享一下具体小程序的ui应该怎么设计? UI设计培训分享:小程序的ui应 ...

新闻小程序3——个人中心页面设计

在my.wxml中添加元素

在xss中确定样式

在js中写入数据

新闻小程序3——个人中心页面设计相关推荐

最新文章

热门文章