<!--pages/index/knowledgeList.wxml--> <view class="container"> <navigator wx:for="{{news}}" url="knowledgeDetail?id={{item.id}}" class="newlist" hover-class="weui-cell_active"> <view class="newslist-left"><image src="{{item.img}}"></image></view> <view class="newslist-right font-size-333">{{item.title}}</view> </navigator> </view> |
/* pages/index/knowledgeList.wxss */ .newlist{ background-color: #ffffff; height: 120rpx; display: flex; flex-direction: row; padding: 30rpx; align-items: center; margin-top: 20rpx; } .newslist-left image{ width: 160rpx; height: 120rpx; margin-right: 30rpx; } |
// pages/index/knowledgeList.js Page({ data:{ news:[{ id:1, title:"酱香白酒与健康的“理论方程式”", img:"/assets/testimages/timg.jpg" },{ id:2, title:"酱香白酒与健康的“理论方程式”", img:"/assets/testimages/timg.jpg" },{ id:3, title:"酱香白酒与健康的“理论方程式”", img:"/assets/testimages/timg.jpg" }] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面隐藏 }, onUnload:function(){ // 页面关闭 } }) |
模板简介:该模板名称为【微信小程序酱酒小百科图文列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。