下拉刷新+渲染列表+将参数传递给下一页
iOS 2018-07-01 18:00:50

1、根据返回的json建立model

比如首页的列表需要用到的，新建一个Swift File

PHP Code复制内容到剪贴板
  1. struct IndexListCell {  
  2.     var avatarImg = ""     // 头像  
  3.     var nickname = ""   // 昵称  
  4.     var position = ""   // 地点  
  5.     var likeNum = 0       // 点赞的人  
  6. }  

命名为：IndexListCell

这里注明了首页需要用到的字段，在控制器给它配置值，并渲染列表数据

 

2、新建tableviewcontroller，storyboard关联，打开新建好的TableViewController：

PHP Code复制内容到剪贴板
  1. // IndexListCell是在model中根据json内容提取出来需要的字段  
  2.   
  3. import Just  
  4. import Kingfisher  
  5.   
  6.   
  7.     let getIndexUrl = "http://xxx.com/api/v1/app-test/list";  
  8.     var IndexList : [IndexListCell] = []  
  9.   
  10.     override func viewDidLoad() {  
  11.         super.viewDidLoad()  
  12.   
  13.         // Uncomment the following line to preserve selection between presentations  
  14.         // self.clearsSelectionOnViewWillAppear = false  
  15.   
  16.         // Uncomment the following line to display an Edit button in the navigation bar for this view controller.  
  17.         // self.navigationItem.rightBarButtonItem = self.editButtonItem  
  18.           
  19.         loadListData()  
  20.           
  21.         // 下拉刷新  
  22.         self.refreshControl = UIRefreshControl()  
  23.           
  24.         // 刷新的动作是loadListData  
  25.         refreshControl?.addTarget(self, action: #selector(loadListData), for: .valueChanged)  
  26.     }  
  27.       
  28.     @objc func loadListData() {  
  29.         Just.post(getIndexUrl) { (res) in  
  30.               
  31.             guard let json = res.json as? NSDictionary else {  
  32.                 // 保证结果为json 并且解析为字典，否则就return  
  33.                 return  
  34.             }  
  35.             let listData = TravelList(fromDictionary: json).data!   // 强制转换  
  36.               
  37.             self.IndexList = listData.map({ (data) -> IndexListCell in  
  38.                 return IndexListCell(avatarImg: data.avatar, nickname: data.nickname, position: data.positon, likeNum: data.like)  
  39.             })  
  40.               
  41.             // 取到数据以后 ，更新主线程代码  
  42.             OperationQueue.main.addOperation {  
  43.                 self.tableView.reloadData()  
  44.                 // 刷新过以后，刷新的动作要停止掉  
  45.                 self.refreshControl?.endRefreshing()  
  46.             }  
  47.               
  48.         }  
  49.     }  
  50.   
  51.     // 几个区块  
  52.     override func numberOfSections(in tableView: UITableView) -> Int {  
  53.         // #warning Incomplete implementation, return the number of sections  
  54.         return 1  
  55.     }  
  56.   
  57.     // 返回列表总数  
  58.     override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {  
  59.         // #warning Incomplete implementation, return the number of rows  
  60.         return IndexList.count  
  61.     }  
  62.   
  63.     // 渲染列表内容  
  64.     override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {  
  65.           
  66.         // indexCell是在storyboard中选择cell添加的ID，首先，取得单个的ID，强制转换为IndexTableViewCell  
  67.         let cell = tableView.dequeueReusableCell(withIdentifier: "indexCell", for: indexPath) as! IndexTableViewCell  
  68.   
  69.         // 取单行的数据，绑定变量  
  70.         let list = IndexList[indexPath.row]  
  71.         cell.IndexNickname.text = list.nickname  
  72.         cell.IndexPosition.text = list.position  
  73.         cell.IndexLikeNum.text = "\(list.likeNum)"  
  74.   
  75.         // 头像 用到kingfisher第三方组件  
  76.         let imgUrl = URL(string: list.avatarImg)  
  77.         cell.IndexAvatar.kf.setImage(with: imgUrl)  
  78.         // 大图  
  79.         cell.IndexBigPic.kf.setImage(with: imgUrl)  
  80.   
  81.         return cell  
  82.     }  

 

3、还是在当前控制器，先取到下一个指定的控制器，在下一个控制器中指定接收的变量，然后在当前控制器将参数传递进去  

PHP Code复制内容到剪贴板
  1. override func prepare(for segue: UIStoryboardSegue, sender: Any?) {  
  2.     // 隐藏自带的导航  
  3.     // navigationController?.setNavigationBarHidden(true, animated: true)  
  4.       
  5.     // 取到下个控制器， 下个界面的控制器就是IndexViewController，并把值传递给下一个界面的  
  6.     let dest = segue.destination as! IndexViewController  
  7.     dest.detail = IndexList[(tableView.indexPathForSelectedRow?.row)!]  
  8.       
  9. }  

 

 

在IndexViewController中，定义一个detail变量名，来接收值；

IndexViewController：

PHP Code复制内容到剪贴板
  1. import Kingfisher  
  2.   
  3.     var detail : IndexListCell! // 加感叹号表示它一定是有值的  
  4.     // 定义几个需要显示的控件  
  5.     @IBOutlet weak var Nickname: UILabel!  
  6.     @IBOutlet weak var AvatarImg: UIImageView!  
  7.     @IBOutlet weak var backgroundImg: UIImageView!  
  8.   
  9.     override func viewDidLoad() {  
  10.         super.viewDidLoad()  
  11.         // dump(detail)  
  12.           
  13.         // 将除了背景以外的元素置顶  
  14.         bringBtnToFront()  
  15.           
  16.         // 设置数据 并且背景虚化 + 背景图片  
  17.         setData()  
  18.     }  
  19.       
  20.     // 将按钮置于上层  
  21.     func bringBtnToFront() {  
  22.         view.bringSubview(toFront: Nickname)  
  23.         view.bringSubview(toFront: AvatarImg)  
  24.     }  
  25.       
  26.     func setData() {  
  27.         // 设置昵称  
  28.         Nickname.text = detail.nickname  
  29.           
  30.         let imgUrl = URL(string: detail.avatarImg)  
  31.         AvatarImg.kf.setImage(with: imgUrl)  
  32.         backgroundImg.kf.setImage(with: imgUrl)  
  33.           
  34.         // 使用UIBlurEffect来作背景虚化  
  35.         let blurEffect = UIBlurEffect(style: .light)  
  36.         let effectView = UIVisualEffectView(effect: blurEffect)  
  37.         // 虚化的容器大小 第一种：等于背景图片的大小  
  38.         // effectView.frame = ImgBackground.bounds  
  39.         // 虚化的容器大小，第二种：等于当前视图的大小，即全屏显示  
  40.         effectView.frame = self.view.bounds  
  41.         // 将它加入到背景中  
  42.         backgroundImg.addSubview(effectView)  
  43.     }  

 

 2.png

如果添加背景层，将它拉到最上面。

 

 

 

 

列表页：

3.png 

详情页：

4.png

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/swift/326.html

上一篇 swift4安装Just
下一篇 入口程序
相关的文章
Powered by yoyo苏ICP备15045725号